<template>
  <div class="terminal-detail" ref="terminalDetail" v-if="isGetToken">
    <div class="terminal-detail-header" ref="headerBody">
      <div class="terminal-detail-header_name" ref="terminalHeader">
        {{ clientDetail != null ? clientDetail.name : ''}}
      </div>
      <div class="terminal-detail-header_time">
        {{ currentDate }}
      </div>
    </div>

    <div class="terminal-detail-body">

      <transition name="expand">
        <div class="terminal-detail-body-right-hide" v-if="hideScenePanelStatus">
          <div class="terminal-detail-body-right-hide_title">
            <span class="terminal-detail-body-right_title_button" @click="expandScenePanel">
              <img src="@/assets/terminalDetail/hide.png" />
              <a>展开</a>
            </span>
          </div>
        </div>
      </transition>
      <transition name="expand">
        <div class="terminal-detail-body-right" v-if="showScenePanelStatus" ref="terminalDetailBodyRight">
          <div class="terminal-detail-body-right_title" ref="rightBodyTitle">
            <span class="terminal-detail-body-right_title_text">场景列表</span>
            <span class="terminal-detail-body-right-upOrDown" @click="mediaPanel">
              <img src="@/assets/terminalDetail/panel_hide.png" v-if="mediaPanelStatus" />
              <span v-if="mediaPanelStatus">收起</span>
              <img src="@/assets/terminalDetail/panel_expand.png" v-if="!mediaPanelStatus" />
              <span v-if="!mediaPanelStatus">展开</span>
            </span>
          </div>
          <div class="terminal-detail-body-right_body" v-if="mediaPanelStatus">
            <draggable class="draggable" v-model="sceneList" forceFallback="true" group="vehicle-station" animation="0"
              :sort="false" touchStartThreshold="0px" dragClass="dragClass" ghostClass="ghostClass"
              chosenClass="chosenClass" :delay="500" @start="onStart" @end="onEnd">
              <div class="item" v-for="item in sceneList" v-clickoutside="() => handleClose(item)">
                <el-popover placement="left" width="200" trigger="manual" v-model="item.visible">
                  <div slot="reference" @click="handleSelectScene(item)">
                    <div class="item_view" v-longpress="() => handlepoPover(item)">
                      <img class="item_view-img" :src="item.image != null ? item.image : defaultSceneImage"
                        :onerror="defaultSceneImage" fit="contain" />
                      <div class="item_name">{{item.title}}</div>
                      <!-- 蒙板 阻止移动端长按弹出菜单 -->
                      <div class="item-mask" @contextmenu.prevent="disableContextMenu"></div>
                    </div>
                  </div>
                </el-popover>
              </div>
            </draggable>
          </div>
        </div>
      </transition>
      <div class="terminal-detail-body-content">
        <div class="terminal-detail-body-content-screen" ref="contentTitle">
          <div :class="['screen-button-container',`${item.id == selectWindowScreen ? 'text-active': ''}`]"
            @click="changeScreen(item)" v-for="(item, index) in windowScreenList">
            <div class="screen-button-container-name">{{item.name}}</div>
            <div class="screen-button-container-size">
              <span
                :class="['screen-button-container-size-text',`${item.id == selectWindowScreen ? 'border-active': ''}`]">{{item.size}}</span>
            </div>
          </div>
        </div>
        <div class="terminal-detail-body-content_main" ref="contentMain"
          :style="{height: middleWindowHeight+120 + 'px'}">
          <div v-show="isShowBarrage" class="barrage">
            <el-table :data="barrageData" style="width: 100%" @cell-dblclick="handleCellDbclick">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="title" label="名称" width="100">
              </el-table-column>
              <el-table-column prop="content" label="内容">
                <template slot-scope="scope">
                  <div class="captions-content" v-html="scope.row.text"></div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.open" :active-value="1" :inactive-value="0"
                    @change="handleCaptionsOpen(scope.row, scope.$index)">
                  </el-switch>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--中间流播放详情-->
          <!-- @mousemove.stop="touchstart" -->
          <div ref="screenWidth" :style="{width: screenWidth + 'px',height: screenHeight + 'px',
                    margin: '0 auto', 'margin-top': screenTop + 'px'}" v-show="!isShowBarrage && showCurrentScreen"
            @mousedown="physicalLeftClickDown" @mouseup="physicalLeftClickUp" @touchstart="physicalLeftClickDown"
            @touchend="physicalLeftClickUp" @mousemove="touchstart" @touchmove="touchstart"
            @wheel="physicalMoveScrollBarFun" @contextmenu.prevent="physicalRightClick">
            <template v-if="mode === ''">
              <div :class="['window', `window-${windows.length}`]" ref="windows">


                <div class="video-bg" v-if="clientDetail.ip"
                  :style="{width: screenWidth + 'px',height: screenHeight + 'px'}">
                  <!--                 <live-player :video-url="`ws://${clientDetail.ip}:8080/stream/V4.live.flv`" live='true' aspect="fullscreen" stretch="true"></live-player>-->

                  <!--                    <live-player :video-url="`http://${clientDetail.ip}:8889/stream/V4`" live='true' aspect="fullscreen" stretch="true"></live-player>-->
                  <iframe :src="`http://${clientDetail.ip}:8889/stream/` + currentScreen.stramAddress" class="vendor-view__iframe"></iframe>
                </div>
                <!-- `http://10.206.1.69:8888` -->
                <!-- <div class="video-bg">
                    <HlsVideo
                      :hls-url="`http://${clientDetail.ip}:8888`"
                    ></HlsVideo>
                </div> -->
                <!--背景虚线框-->
                <!-- <div class="window-block-container" v-if="currentLayout.vertical && currentLayout.layoutType === 'other'">
                  <div class="window-block-row" v-for="(item, index) in parseInt(currentLayout.vertical)">
                    <div
                      :style="`width: ${Math.floor(middleWindowWidth/currentLayout.vertical) - 1}px;height: ${Math.floor(middleWindowHeight/currentLayout.horizontal)+ 1}px`"
                      class="window-block-col"
                      v-for="(item, index) in parseInt(currentLayout.horizontal)"
                    ></div>
                  </div>
                </div> -->
                <!-- :style="layoutWindows[i].coordinate?JSON.parse(layoutWindows[i].coordinate): ''" -->

                <div :class="['window-item', `window-item-${i}`, `${activeWindow == i?'window-item-active': ''}`]"
                  v-for="(item, i) in windows" v-show="mode != 'manyou'" :key="i" :data-actindex="i" :item="item"
                  @click="handleSelect(i)"
                  :style="layoutWindows.length > 0 ? (layoutWindows[i].coordinate != undefined && layoutWindows[i].coordinate != null? JSON.parse(layoutWindows[i].coordinate): '') : ''">
                  <template>
                    <draggable class="window-draggable" forceFallback="true" group="fodder" :data-actindex="i"
                      animation="0" :sort="false" touchStartThreshold="0px" dragClass="dragClass"
                      ghostClass="ghostClass" chosenClass="chosenClass" filter=".window-item-no"
                      @end="(e) => onEndWindow(e, item.list)">
                      <div v-if="item.image" class="window-item-no" :data-actindex="i">{{ item.content }}</div>
                      <div v-else-if="item.id" class="window-item-no" :data-actindex="i">
                        {{ item.content.showList ? item.content.showList[0].name : item.content }}</div>
                    </draggable>
                  </template>
                </div>
              </div>
            </template>
            <template v-if="mode === 'manyou'">
              <!-- <div :class="{windowMask: isFullscreen}"> -->
              <!-- <div ref="controlPanel" class="control-panel"  :style="{top: mouseTop + 'px', left: mouseLeft + 'px'}"
                    v-show="isFullscreen && isShowMousePannel">
                  <div class="left"
                    @mousedown="mouseLeftDown"
                    @mouseup="mouseLeftUp"
                    @mousemove="mouseLeftMove"
                    @touchstart="mouseLeftDown"
                    @touchend="mouseLeftUp"
                    @touchmove="mouseLeftMove"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="scrollBar">
                    <el-slider
                      ref="slider"
                      v-model="scrollBarValue"
                      :min="-100"
                      :max="100"
                      :show-tooltip="false"
                      vertical
                      :class="hideScrollBar ? 'sliderBar' : ''"
                      @mousedown.native="showScrollBarFun"
                      @mouseup.native="hideScrollBarFun"
                      @mousemove.native="moveScrollBarFun"
                      @touchstart.native="showScrollBarFun"
                      @touchend.native="hideScrollBarFun"
                      @touchmove.native="moveScrollBarFun"
                      height="100px">
                    </el-slider>
                  </div>
                  <div class="middle"
                    @mousedown="remoteControllMouseDown"
                    @mouseup="remoteControllMouseUp"
                    @touchstart="remoteControllMouseDown"
                    @touchend="remoteControllMouseUp"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="right" @click="mouseRightClick"
                    v-show="hideScrollBar">
                  </div>
                </div> -->
              <!-- </div> -->
              <div class="window" :class="{videoBgFullscreen: isFullscreen}" ref="windowDom"
                @mousemove="remoteControllMouseMove" @touchmove="remoteControllMouseMove" @mouseup="hideScrollBarFun"
                @drop="(ev) => {dropNewHandler(ev, scope.row)}">
                <div class="window-block-container" :style="{width: screenWidth + 'px',height: screenHeight + 'px'}"
                  v-if="manyouLayout.row && manyouLayout.col">
                  <div class="window-block-row" v-for="(item, indexH) in parseInt(manyouLayout.row)">
                    <div :style="{width: manyouLayoutWidth + 'px', height: manyouLayoutHeight + 'px',color: '#fff'}"
                      class="window-block-col" :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth*indexW" v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexW < parseInt(manyouLayout.col)-1 && indexH < parseInt(manyouLayout.row)-1"></div>
                    <!-- 无法除尽的在最后行、列补齐 -->
                    <div
                      :style="{width: screenWidth - manyouLayoutWidth * indexW + 'px', height: manyouLayoutHeight + 'px',color: '#fff'}"
                      class="window-block-col" :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW" v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexW == parseInt(manyouLayout.col)-1 && indexH != parseInt(manyouLayout.row)-1"></div>
                    <div :style="{width: manyouLayoutWidth + 'px',
                      height: screenHeight - manyouLayoutHeight * indexH + 'px',color: '#fff'}"
                      class="window-block-col" :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW" v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexH == parseInt(manyouLayout.row)-1 && indexW != parseInt(manyouLayout.col)-1"></div>
                    <div :style="{width: screenWidth - manyouLayoutWidth * indexW + 'px',
                      height: screenHeight - manyouLayoutHeight * indexH + 'px',color: '#fff'}"
                      class="window-block-col" :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW" v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexH == parseInt(manyouLayout.row)-1 && indexW == parseInt(manyouLayout.col)-1"></div>
                  </div>
                </div>
                <div ref="controlPanel" class="control-panel" :style="{top: mouseTop + 'px', left: mouseLeft + 'px'}"
                  v-show="isFullscreen && isShowMousePannel">
                  <div class="left" @mousedown="mouseLeftDown" @mouseup="mouseLeftUp" @mousemove="mouseLeftMove"
                    @touchstart="mouseLeftDown" @touchend="mouseLeftUp" @touchmove="mouseLeftMove"
                    v-show="hideScrollBar">
                  </div>
                  <div class="scrollBar">
                    <el-slider ref="slider" v-model="scrollBarValue" :min="-100" :max="100" :show-tooltip="false"
                      vertical :class="hideScrollBar ? 'sliderBar' : ''" @mousedown.native="showScrollBarFun"
                      @mouseup.native="hideScrollBarFun" @mousemove.native="moveScrollBarFun"
                      @touchstart.native="showScrollBarFun" @touchend.native="hideScrollBarFun"
                      @touchmove.native="moveScrollBarFun" height="100px">
                    </el-slider>
                  </div>
                  <div class="middle" @mousedown="remoteControllMouseDown" @mouseup="remoteControllMouseUp"
                    @touchstart="remoteControllMouseDown" @touchend="remoteControllMouseUp" v-show="hideScrollBar">
                  </div>
                  <div class="right" @click="mouseRightClick" v-show="hideScrollBar">
                  </div>
                </div>
                <!-- <div class="video-bg">
                    <HlsVideo
                      :hls-url="`http://${clientDetail.ip}:8888`"
                    ></HlsVideo>
                </div> -->

                <div class="video-bg" v-if="clientDetail.ip"
                  :style="{width: screenWidth + 'px',height: screenHeight + 'px'}">
                  <!--                  <live-player :video-url="`ws://${clientDetail.ip}:8080/stream/V4.live.flv`" live='true' aspect="fullscreen" stretch="true"></live-player>-->
                  <!--                    <live-player :video-url="`http://${clientDetail.ip}:8889/stream/V4`" live='true' aspect="fullscreen" stretch="true"></live-player>-->

                  <iframe :src="`http://${clientDetail.ip}:8889/stream/` + currentScreen.stramAddress" class="vendor-view__iframe"></iframe>
                </div>
              </div>
            </template>
            <div
              :class="[1].includes(+select.mediaType)?'terminal-detail-body-content_main-option terminal-detail-body-content_main-option-video': 'terminal-detail-body-content_main-option'"
              v-if="select && select.mediaType" v-show="!isMinWindow">
              <div v-if="[1].includes(+select.mediaType)">
                <div class="progress"
                  style="display: flex;width: 100%;align-items: center;color: white;padding-top: .2rem;">
                  <div>{{transformTimerForSecond(videoCurrentPlayTime)}}</div>
                  <PercentBar style="width: 100%;margin: 0 .2rem;" ref="percentBarRef" @change="changePercent">
                  </PercentBar>
                  <div>{{transformTimerForSecond(videoTotalPlayTime)}}</div>
                </div>
              </div>
              <div v-if="[1].includes(+select.mediaType)" class="video">
                <div class="operationBtn videoPlay" @click="playVideo('play')"></div>
                <div class="operationBtn videoPause" @click="playVideo('pause')"></div>
                <div class="operationBtn videoStop" @click="playVideo('stop')"></div>
                <div class="operationBtn videoReplay" @click="playVideo('replay')"></div>
                <img src="@/assets/terminalDetail/voice_not.png" @click="playVideoVoice('unslience')" v-if="!videoVoice"
                  style="margin-left: 8%">
                <img src="@/assets/terminalDetail/voice.png" @click="playVideoVoice('silence')" v-if="videoVoice"
                  style="margin-left: 8%">

                <PercentBar style="width: 20%;margin: 0 .2rem;height: .1rem;" ref="percentAudioBarRef"
                  @change="changeAudioPercent"></PercentBar>
                <div class="audio-words">{{audioPercent}}%</div>
              </div>
              <!--图片模式-->
              <div v-if="[2].includes(+select.mediaType)" class="image">
                <div class="operationBtn imagePlay" @click="controlImage('play')"></div>
                <div class="operationBtn imagePause" @click="controlImage('pause')"></div>

                <!-- <img src="@/assets/terminalDetail/play.png" @click="controlImage('play')" v-show="!select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/play_active.png" @click="controlImage('play')" v-show="select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/pause.png" @click="controlImage('pause')" v-show="select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/pause_active.png" @click="controlImage('pause')" v-show="!select.playStatus"> -->
                <div class="sum-warp">
                  <input class="sum-warp-text" v-model="autoPlayImageNum" type="text">
                  <div class="unit">s</div>
                </div>

                <div class="operationBtn imageFirst" @click="controlImage('first')"></div>
                <div class="operationBtn imagePrevious" @click="controlImage('previous')"></div>
                <div class="operationBtn imageNext" @click="controlImage('next')"></div>
                <div class="operationBtn imageLast" @click="controlImage('last')"></div>
                <!-- <img src="@/assets/terminalDetail/first.png" @click="controlImage('first')" v-if="isPPtOffice"> -->
                <!-- <img src="@/assets/terminalDetail/previous.png" @click="controlImage('previous')"> -->
                <!-- <img src="@/assets/terminalDetail/next.png" @click="controlImage('next')"> -->
                <!-- <img src="@/assets/terminalDetail/last.png" @click="controlImage('last')" v-if="isPPtOffice"> -->
              </div>
              <div v-if="[3].includes(+select.mediaType)" class="image">
                <div class="operationBtn imagePlay" @click="controlImage('play')" v-if="isPPtOffice"></div>
                <div class="operationBtn imagePause" @click="controlImage('pause')" v-if="isPPtOffice"></div>
                <!-- <img src="@/assets/terminalDetail/play.png" @click="controlImage('play')" v-if="isPPtOffice" v-show="!select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/play_active.png" @click="controlImage('play')" v-if="isPPtOffice" v-show="select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/pause.png" @click="controlImage('pause')" v-if="isPPtOffice" v-show="select.playStatus"> -->
                <!-- <img src="@/assets/terminalDetail/pause_active.png" @click="controlImage('pause')" v-if="isPPtOffice" v-show="!select.playStatus"> -->
                <div v-if="isPPtOffice" class="sum-warp">
                  <!-- <el-input-number style="margin-right: .2rem;" size="mini" v-model="autoPlayImageNum" controls-position="right" :min="1" :max="10000"></el-input-number> -->
                  <input class="sum-warp-text" v-model="autoPlayImageNum" type="text">
                  <div class="unit">s</div>
                </div>
                <!-- <img src="@/assets/terminalDetail/first.png" @click="controlImage('first')" v-if="isPPtOffice"> -->
                <!-- <img src="@/assets/terminalDetail/previous.png" @click="controlImage('previous')"> -->
                <!-- <img src="@/assets/terminalDetail/next.png" @click="controlImage('next')"> -->
                <!-- <img src="@/assets/terminalDetail/last.png" @click="controlImage('last')" v-if="isPPtOffice"> -->

                <div class="operationBtn imageFirst" @click="controlImage('first')" v-if="isPPtOffice"></div>
                <div class="operationBtn imagePrevious" @click="controlImage('previous')"></div>
                <div class="operationBtn imageNext" @click="controlImage('next')"></div>
                <div class="operationBtn imageLast" @click="controlImage('last')" v-if="isPPtOffice"></div>
              </div>

              <div v-if="[4].includes(+select.mediaType)" class="application">
                <!-- <svg-icon @click="controlApplication('refresh')" icon-class="refresh" /> -->
                <div class="operationBtn applicationReplay" @click="controlApplication('refresh')"></div>
                <div class="operationBtn applicationClose" @click="controlApplication('close')"></div>
                <!-- <svg-icon @click="controlApplication('close')" icon-class="close" /> -->
              </div>
              <div v-if="[5].includes(+select.mediaType)" class="web">
                <div class="operationBtn webPrevious" @click="controlWebApplication('prev')"></div>
                <div class="operationBtn webNext" @click="controlWebApplication('next')"></div>
                <div class="operationBtn webReplay" @click="controlWebApplication('refresh')"></div>
                <!-- <img src="@/assets/terminalDetail/previous.png" @click="controlWebApplication('prev')"> -->
                <!-- <img src="@/assets/terminalDetail/next.png" @click="controlWebApplication('next')"> -->
                <!-- <img src="@/assets/terminalDetail/replay.png" @click="controlWebApplication('refresh')"> -->

                <div class="progress">
                  <el-input placeholder="请输入网址" v-model="routerUrl" class="input-with-select">
                    <span slot="append" @click="controlWebApplication('navigate')"
                      style="cursor: pointer;font-size:.24rem">跳转</span>
                  </el-input>
                  <!-- <el-input type="text" v-model="routerUrl"></el-input> -->
                </div>
                <!-- <svg-icon @click="controlWebApplication('navigate')" icon-class="position" /> -->
                <el-popover ref="historyPopover" placement="top" width="400" trigger="click">
                  <div class="website-list-body">
                    <div class="website-list-row" v-for="(item, index) in historyWebsite">
                      <div class="website-list-col" @click="controlWebApplication('navigate', item)">{{index+1}}.
                        {{item.name}}</div>
                    </div>
                  </div>
                  <img src="@/assets/terminalDetail/history.png" slot="reference" style="width: .45rem;" />
                  <!-- <svg-icon slot="reference" icon-class="history" /> -->
                </el-popover>
              </div>
              <div v-if="[7].includes(+select.mediaType)" class="application">
                <!-- <svg-icon icon-class="play" />
                <svg-icon icon-class="pause" />
                <svg-icon icon-class="stop" />
                <svg-icon icon-class="resetting" /> -->
              </div>
              <div v-if="[8].includes(+select.mediaType)" class="application">
                <!-- <svg-icon icon-class="icons_next" style="transform: rotate(180deg);"/> -->
                <!-- <svg-icon icon-class="icons_next" /> -->
                <!-- <img src="@/assets/terminalDetail/play.png" @click="playShow('play')" v-show="!select.playStatus">
                <img src="@/assets/terminalDetail/play_active.png" @click="playShow('play')" v-show="select.playStatus">
                <img src="@/assets/terminalDetail/pause.png" @click="playShow('stop')" v-show="select.playStatus">
                <img src="@/assets/terminalDetail/pause_active.png" @click="playShow('stop')" v-show="!select.playStatus">
                <img src="@/assets/terminalDetail/previous.png" @click="playShow('prev')">
                <img src="@/assets/terminalDetail/next.png" @click="playShow('next')"> -->
                <div class="operationBtn programPlay" @click="playShow('play')"></div>
                <div class="operationBtn programStop" @click="playShow('stop')"></div>
                <div class="operationBtn programPrev" @click="playShow('prev')"></div>
                <div class="operationBtn programNext" @click="playShow('next')"></div>

              </div>
              <div v-if="[9].includes(+select.mediaType)" class="video">
                <div class="operationBtn videoPlay" @click="playStream('replay')"></div>
                <div class="operationBtn videoStop" @click="playStream('stop')"></div>
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="terminal-detail-body-left" ref="terminalDetailBodyLeft">
        <div class="terminal-detail-body-title" ref="leftBodyTitle">
          <span class="title">素材中心</span>
          <el-button size="mini" :type="fileType == 1 ? 'primary' : ''" @click="changeFileType(1)">服务器</el-button>
          <el-button size="mini" :type="fileType == 2 ? 'primary' : ''" @click="changeFileType(2)">快捷列表</el-button>
        </div>
        <div class="terminal-detail-body-menu" ref="leftBodyMenu">
          <span>筛选：</span>
          <span>
            <select class="mediaTypeSelector" @change="mediaTypeSelect" v-model="mediaTypeSelectValue">
              <option v-for="item in mediaTypeList" :value="item.value">{{item.name}}</option>
            </select>
          </span>
        </div>
        <div class="extraRight" v-if="isFullscreen && isShowMousePannel" :style="{left: windowWidth+'px'}"></div>
        <div class="extraBottom" v-if="isFullscreen && isShowMousePannel"
          :style="{top: windowHeight+'px', width: windowWidth+120 + 'px'}"></div>
        <!-- 素材 -->
        <div class="terminal-detail-body-left-file">
          <!-- <fodder-list :list="selectFileList" @other="manyouMethods" @add="handleAdd"></fodder-list> -->

          <div class="terminal-detail-body-left-back" v-if="parentId != 0" @click="mediaBack">
            返回上一层
          </div>
          <draggable class="draggable" v-model="selectFileList" forceFallback="true"
            :group="{name:'fodder',pull:'clone',put:'false'}" animation="0" :sort="false" touchStartThreshold="0px"
            dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" :delay="500"
            @start="(e) => onLeftStart(e, selectFileList)" @end="(e) => onLeftEnd(e, selectFileList)"
            @move="(e) => onLeftMove(e, selectFileList)" @contextmenu.prevent="disableContextMenu">
            <div class="item" data-index="j" v-for="(row, j) in selectFileList" :key="row.id"
              @dblclick="onDoubleClick(row)">
              <div class="item_view">
                <div class="item_type">{{row.mediaTypeName}}</div>
                <!-- @error="mediaImageError(row)"  -->
                <img class="item_view-img"
                  :src="row.file_type == 1 ? defaultFolderImage : row.image ? row.image : row.media_type == 2 ? row.media_link : row.defaultImage"
                  @error="mediaImageError(row)" fit="cover" />
                <div class="item_name">{{row.media_name}}</div>

                <!-- 蒙板 阻止移动端长按弹出菜单 -->
                <div class="item-mask" @contextmenu.prevent="disableContextMenu"></div>
              </div>
            </div>
          </draggable>
        </div>
      </div>
      <div class="terminal-detail-body-content_operation" ref="contentOperation">
        <div class="terminal-detail-body-content_operation_left" ref="operationLeft">
          <div class="operation-btn-container" @click="clearAll">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/home.png" />
            </div>
            <div class="operation-btn-container-text">清屏</div>
          </div>
          <div class="operation-btn-container" @click="handleClear">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/delete.png" />
            </div>
            <div class="operation-btn-container-text">删除</div>
          </div>
          <!-- <div class="operation-btn-container" @click="minWindow">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/system.png" />
            </div>
            <div class="operation-btn-container-text">系统</div>
          </div>
          <div class="operation-btn-container" @click="maxWindow">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/application.png" />
            </div>
            <div class="operation-btn-container-text">应用</div>
          </div>
          <div class="operation-btn-container" v-show="!lock" title="长按3秒锁定" v-longpress="() => handleLock()">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/lock.png" />
            </div>
            <div class="operation-btn-container-text">锁定</div>
          </div>
          <div class="operation-btn-container" v-show="lock" title="长按3秒解锁" v-longpress="() => handleUnlock()">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/unlock.png" />
            </div>
            <div class="operation-btn-container-text">解锁</div>
          </div> -->
          <!-- <div class="operation-btn-container" @click="remoteControll">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/control.png"/>
            </div>
            <div class="operation-btn-container-text">反向控制</div>
          </div> -->
          <div class="operation-btn-container" @click="handleBarrage">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/caption.png" />
            </div>
            <div class="operation-btn-container-text">字幕</div>
          </div>
        </div>
        <div class="terminal-detail-body-content_operation-right" ref="operationRight">
          <div class="right-operation-btn-container" @click="showClearQueueDialogFun(1)">
            <div class="operation-btn-container-img">
              <img src="@/assets/terminalDetail/free.png" />
            </div>
            <div class="operation-btn-container-text">自由模式</div>
          </div>
          <div class="right-operation-btn-container" v-for="(item, i) in layoutList" :key="i" fit="contain"
            @click="showClearQueueDialogFun(2,item.windows, item, 'default')">
            <div class="operation-btn-container-img">
              <img :src="item.image" />
            </div>
            <div class="operation-btn-container-text">{{item.title}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="修改字幕" :visible.sync="dialogCaptionsVisible">
      <div class="dm-position-row">
        <div @click="setDmPos(1)"
          :class="contentForm.type == 1? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          左对齐
        </div>
        <div @click="setDmPos(2)"
          :class="contentForm.type == 2? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          水平居中
        </div>
        <div @click="setDmPos(3)"
          :class="contentForm.type == 3? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          右对齐
        </div>
        <div @click="setDmPos(4)"
          :class="contentForm.type == 4? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          上对齐
        </div>
        <div @click="setDmPos(5)"
          :class="contentForm.type == 5? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          垂直居中
        </div>
        <div @click="setDmPos(6)"
          :class="contentForm.type == 6? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          下对齐
        </div>

        <div class="dm-position-col">
          <el-button type="primary">仿真</el-button>
        </div>

        <div class="dm-position-col">
          备注：仿真表示将字幕信息临时推送到终端，展示出来。
        </div>
      </div>
      <Editor @on-change="changeDmContent" :value="contentForm.content" :min-height="320"></Editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCaptionsVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCaptions">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="自由模式" :visible.sync="manyouLayoutShow" width="40%" :before-close="manyouLayoutClose">
      <div>
        <el-form :inline="true" class="demo-form-inline row-control">
          <el-form-item label="行数">
            <el-input type="number" v-model="manyouLayoutEdit.row" class="mayouLayoutInput"></el-input>
          </el-form-item>
          <el-form-item label="列数">
            <el-input type="number" v-model="manyouLayoutEdit.col" class="mayouLayoutInput"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="manyouCancel">取 消</el-button>
        <el-button type="primary" @click="manyouConfirm">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="注意" :visible.sync="showClearQueueDialog" width="40%" :before-close="hideClearQueueDialog">
      <div style="padding: 0.2rem;">
        当前有待展示素材向终端传输文件中，若切换模式或场景，则取消该素材的展示（不影响文件传输），是否确认切换？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideClearQueueDialog">取 消</el-button>
        <el-button type="primary" @click="clearQueueConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <TerListDialog :show-ter-dialog="showTerDialog" ref="terListDialogRef" @on-cancel="cancelTerDialog"
      @on-confirm="cancelTerDialog"></TerListDialog>
  </div>
</template>

<script>
  import Vue from 'vue/dist/vue.js'
  import mpegts from 'mpegts.js'
  import format from '@/utils/format'
  import fodderList from './components/fodder-list.vue'
  import windowItem from './components/window-item.vue'
  import PercentBar from "@/views/terminalDetail/components/percentBar.vue";
  import {
    sendCmd
  } from './utils/sendCmd'
  import EventBus from "@/utils/eventBus";
  import {
    getFileListByTerminalId
  } from './utils/getAllFileByTerminalId'
  import {
    mediaTypeMap,
    mediaTypeStrMap,
    suffixFileMapStr
  } from '@/utils/config'
  import {
    toBase64
  } from 'js-base64'
  import {
    getSceneList,
    getBySceneId,
    saveScene,
    getCaptions,
    openOrClose,
    saveCaptions,
    getLayoutList,
    getClientList,
    quicklySend,
    getSendFileRecord,
    getToken
  } from './service'
  import {
    suffixFileMapObj
  } from "@/utils/config";
  import longpress from '@/directive/longpress'
  import Clickoutside from 'element-ui/src/utils/clickoutside';
  import Editor from "@/components/Editor/index.vue";
  import draggable from 'vuedraggable';
  import RtmpLive from "@/views/terminalDetail/components/rtmpLive.vue";
  import FlvHttp from "@/views/terminalDetail/components/flvHttp.vue";
  import HlsVideo from "@/views/terminalDetail/components/hlsVideo1.vue";
  import image from "@/views/terminalDetail/image/four-col.png";
  import VueDragResize from "vue-drag-resize";
  export default {
    components: {
      fodderList,
      draggable,
      windowItem,
      Editor,
      RtmpLive,
      FlvHttp,
      PercentBar,
      HlsVideo
    },
    directives: {
      longpress: longpress(),
      Clickoutside
    },
    data() {
      return {
        isGetToken: false,
        showCurrentScreen: false,
        clientId: null,
        mediaPanelStatus: true,
        isMinWindow: false,
        handlerWindowsObj: null,
        sceneWindows: null,
        showClearQueueDialog: false,
        confirmClearQueue: false,
        windowWidth: 0,
        windowHeight: 0,
        recordsList: [],
        waitToShowQueue: [],
        fileCache: null,
        showTerDialog: false,
        mouseScrollLeft: 0,
        mouseScrollTop: 0,
        extraLeft: 0,
        mediaTypeSelectValue: 0,
        parentId: 0,
        mediaHistory: [],
        defaultImage: [
          require('@/assets/terminalDetail/default_video.png'),
          require('@/assets/terminalDetail/default_img.png'),
          require('@/assets/terminalDetail/default_doc.png'),
          require('@/assets/terminalDetail/default_app.png'),
          require('@/assets/terminalDetail/default_web.png'),
          require('@/assets/terminalDetail/default_desktop.png'),
          require('@/assets/terminalDetail/default_other.png'),
          require('@/assets/terminalDetail/default_program.png'),
          require('@/assets/terminalDetail/default_stream.png')
        ],
        defaultFolderImage: require('@/assets/terminalDetail/folder.png'),
        defaultAppImage: require('@/assets/terminalDetail/default_app.png'),
        defaultVideoImage: require('@/assets/terminalDetail/default_video.png'),
        defaultDesktopImage: require('@/assets/terminalDetail/default_desktop.png'),
        defaultDocImage: require('@/assets/terminalDetail/default_doc.png'),
        defaultImgImage: require('@/assets/terminalDetail/default_img.png'),
        defaultOtherImage: require('@/assets/terminalDetail/default_other.png'),
        defaultProgramImage: require('@/assets/terminalDetail/default_program.png'),
        defaultQuickImage: require('@/assets/terminalDetail/default_quick.png'),
        defaultStreamImage: require('@/assets/terminalDetail/default_stream.png'),
        defaultWebImage: require('@/assets/terminalDetail/default_web.png'),
        defaultSceneImage: require('@/assets/terminalDetail/default_scene.png'),
        isDoubleClicked: false,
        manyouLayoutWidth: 0,
        manyouLayoutHeight: 0,
        manyouLayoutShow: false,
        fileType: 1,
        playImageStatus: false,
        hideScrollBar: true,
        scrollBarValue: 0,
        terminalDetailBodyRightHeight: 0,
        rightFileHeight: 0,
        leftFileHeight: 0,
        clientSelected: null,
        clientList: [],
        showScenePanelStatus: true,
        hideScenePanelStatus: false,
        clientName: '',
        mediaTypeList: [],
        moveCache: [],
        leftDownWithMoveY: 0,
        leftDownWithMoveX: 0,
        mouseLeftDownY: 0,
        mouseLeftDownX: 0,
        mouseLeftDownTime: 0,
        isMouseLeftDown: false,
        isMouseLeftDrag: false,
        verClickNum: 0,
        lastClickTime: 0,
        clickTimer: null,
        // currentSceneLayout: null,
        activeCombinationKey: [],
        // combinationKey: ["Ctrl","Shift","Caps","Win"],
        combinationKey: [{
            "key": "Ctrl",
            "value": "VK_CONTROL"
          },
          {
            "key": "Shift",
            "value": "VK_SHIFT"
          },
          {
            "key": "Caps",
            "value": "VK_CAPITAL"
          },
          {
            "key": "Win",
            "value": "VK_WIN"
          },
          {
            "key": "Alt",
            "value": "VK_MENU"
          }
        ],
        isShowMousePannel: false,
        isShowApplication: false,
        remoteControllState: false,
        isFullscreen: false,
        mouseTop: 0,
        mouseLeft: 0,
        handlerWindow: null,
        handlerLayout: null,
        handlerType: null,
        currentWindowId: 0,
        mouseX: 0,
        mouseY: 0,
        mouseChildX: 0,
        mouseChildY: 0,
        screenTop: 0,
        screenHeight: 0,
        screenWidth: 0,
        clientDetail: {},
        selectWindowScreen: null,
        windowScreenList: [],
        currentScreen: {},
        createWindowNum: 0,
        mode: '',
        historyWebsite: [],
        autoPlayImageNum: 5,
        currentLayout: {},
        manyouLayout: {
          row: 6,
          col: 6
        },
        manyouLayoutEdit: {
          row: 6,
          col: 6
        },
        videoVoice: true,
        currentDate: '',
        updateTimeId: null,
        currentScreenItem: {},
        showMoreViewIcon: false,
        sceneList: [],
        audioPercent: 0,
        getPercentTimer: null,
        fileList: suffixFileMapObj(),
        selectFileList: [],
        windows: [],
        player: null,
        baImgSrc: '',
        select: '',
        middleWindowWidth: '',
        middleWindowHeight: '',
        flvPlayer: {},
        activeWindow: null,
        videoMap: new Map(),
        lock: false,
        isShowBarrage: false,
        barrageData: [],
        dialogCaptionsVisible: false,
        contentForm: {},
        layoutList: [],
        layoutWindows: [],
        timer: null,
        playProgrameList: [],
        programeTimer: null,
        routerUrl: '',
        videoCurrentPlayTime: 0,
        videoTotalPlayTime: 0,
      }
    },
    computed: {
      urlParams() {
        return this.$route.query.p;
      },
      transformTimerForSecond() {
        return (row) => {
          if (row == 0) {
            return "00:00:00";
          } else {
            let value = row * 1000
            if (value === 0 || value < 1000) return 0;
            var timestamp = parseInt(value) / 1000; // 毫秒转秒
            // 小时取余数
            const remainder = timestamp % 3600
            // 时、分、秒
            let hour, minute, second;
            if (remainder === 0) { // 整除 小时
              hour = parseInt(timestamp / 3600);
            } else {
              hour = parseInt(timestamp / 3600);
              let remainderMinute = remainder % 60;
              if (remainderMinute === 0) { // 整除 分钟
                minute = parseInt(remainder / 60);
              } else {
                minute = parseInt(remainder / 60);
                second = parseInt(remainderMinute);
              }
            }
            let text = '';
            if (hour > 0) {
              if (hour < 10) {
                text += `0${hour}` + ':';
              } else {
                text += hour + ':';
              }
            }
            if (minute > 0) {
              if (minute < 10) {
                text += `0${minute}` + ':';
              } else {
                text += minute + ':';
              }
            }
            if (second > 0) {
              if (second < 10) {
                text += `0${second}`;
              } else {
                text += `${second}`;
              }
            }
            if (hour <= 0 && minute <= 0) {
              text = `00:00:${text}`
            }
            if (hour <= 0 && minute > 0) {
              text = `00:${text}`
            }
            return text
          }
        }
      },
      isPPtOffice() {
        // 判断文件名是否ppt
        if (this.select.content.indexOf('ppt') !== -1 || this.select.content.indexOf('pptx') !== -1 || this.select
          .subMode == 'ppt') {
          return true
        } else {
          return false
        }
      },
      id() {
        return this.$route.query.id
      },
      currentWindow() {
        // if (this.mode === '') {
        //   if (this.windows && this.windows[this.select]) {
        //     this.windows[this.select].windowId = parseInt(this.select, 10) + 1
        //   }
        //   return this.select !== '' ? this.windows[this.select] : {}
        // } else if (this.mode === 'manyou') {
        //   return this.select
        // }
       return this.select
      }
    },
    watch: {
      "id"(val) {
        this.$router.go(0);
      },
      "currentWindow.mediaType"(val) {
        setTimeout(() => {
          // this.reCalWidthHeight()
        }, 300)
      },
      "select"(val) {
        this.initSelectedWindow(val.winId == null ? val.windowId : val.winId);
        clearTimeout(this.getPercentTimer)
        this.continueStatus = false;
        if(val.subMode == 'video' || val.subMode == 'movie') {
            this.$nextTick(() => {
              setTimeout(() => {
                  this.continueStatus = true;
                  // 开始发送获取视频进度的指令
                  this.startWatchVideoPercent(val)
                  // 获取音频进度
                  this.startGetVideoAudioPercent(val)
              }, 500)
            })
        } else {
            this.getPercentTimer = null
        }
      }
    },
    mounted() {
      //轮询 处理待展示素材
      let _this = this;
      setInterval(() => {
        _this.handleQueue();
      }, 10000);
      //轮询 查看待展示素材文件发送进度
      setInterval(() => {
        // _this.getSendRecordList();
      }, 2500);
      this.mediaTypeList = [{
          "value": 0,
          "name": "全部"
        },
        {
          "value": 1,
          "name": "视频"
        },
        {
          "value": 2,
          "name": "图片"
        },
        {
          "value": 3,
          "name": "文档"
        },
        {
          "value": 5,
          "name": "网页应用"
        },
        {
          "value": 4,
          "name": "应用程序"
        },
        {
          "value": 8,
          "name": "节目"
        },
        {
          "value": 9,
          "name": "流媒体"
        },
        {
          "value": 6,
          "name": "电脑桌面"
        },
        {
          "value": 7,
          "name": "其他"
        }
      ];
      document.body.style.setProperty('--fodder-bg-color', 'transparent')

      const clientDetail = window.localStorage.getItem('clientDetail')
      if (clientDetail) {
        this.clientDetail = JSON.parse(clientDetail)
        this.clientName = this.clientDetail.name
      }
      // 读取网页历史记录
      this.getWebsiteHistory()
      window.addEventListener('resize', () => {
        this.extraLeft = window.innerWidth
        //判断是否退出全屏 null为退出
        if (document.fullscreenElement == null && this.isFullscreen) {
          // 解除禁止滚动
          document.body.style.overflow = '';
          this.isFullscreen = false;
          this.activeCombinationKey = [];
          sendCmd('max', 'window', null, () => {})

          //恢复可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.style.visibility = '';
          })

          //恢复分割线
          const blockNodes = document.querySelectorAll('.window-block-container');
          blockNodes.forEach((blockNode) => {
            blockNode.style.visibility = '';
          })
        }
        if (this.isFullscreen) {
          //隐藏可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.style.visibility = 'hidden';
          })
          //隐藏分割线
          const blockNodes = document.querySelectorAll('.window-block-container');
          blockNodes.forEach((blockNode) => {
            blockNode.style.visibility = 'hidden';
          })
        }
        this.scrollHeight()
      })
      if (typeof(WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {}
      EventBus.$emit('hiddenNavbar')
      document.body.style.setProperty('--bg-color', 'transparent')
      document.body.style.setProperty('--border-value', '1px solid #ffffff')

      EventBus.$on('emitActive', (row) => {
        this.select = {
          ...row
        }
      })
      this.mode = 'manyou';



      //是否之际进入远程控制全屏
      this.$nextTick(() => {
        setTimeout(() => {
          let isFullScreen = _this.$route.query.isFullScreen;
          if (isFullScreen) {
            window.scrollTo(0, 0);
            this.remoteControll(null);
          }
        }, 10000)
      })

      this.scrollHeight();
      this.operationLeftScrollInit();
      this.operationRightScrollInit();
    },
    methods: {
      mediaPanel() {
        this.mediaPanelStatus = !this.mediaPanelStatus;
      },
      async getCurrentToken() {
        let params = this.urlParams;
        let obj = {
          params
        }
        let res = await getToken(obj);
        let target = 'platform';
        window.localStorage.setItem(`token-${target}`, res.data.token)
        this.isGetToken = true;
        localStorage.setItem('clientDetail', JSON.stringify(res.data.client));
        this.clientDetail = res.data.client;
        this.showTerDialogAfterGetToken = true;
        this.clientId = res.data.id;

        //获取素材中心素材
        this.scrollHeight();
        await this.getFileListByTerminalId(null);
        await this.getSceneList(res.data.id);
        await this.getLayoutList();
        setTimeout(() => {
          this.manyouConfirm();
        }, 1000)

      },
      showClearQueueDialogFun(type, windows, item, state) {
        this.clearQueueType = type;
        if (type == 2) {
          this.handlerWindowsObj = {
            windows,
            item,
            state
          }
        } else if (type == 3) {
          this.sceneWindows = windows;
        }
        if (this.waitToShowQueue.length > 0) {
          this.showClearQueueDialog = true;
        } else {
          this.clearQueueConfirm();
        }
      },
      clearQueueConfirm() {
        if (this.clearQueueType == 1) {
          this.handleRoam();
        } else if (this.clearQueueType == 2) {
          this.handlerWindows(this.handlerWindowsObj.windows, this.handlerWindowsObj.item, this.handlerWindowsObj.state)
        } else {
          this.handlerSceneWindows(this.sceneWindows)
        }
        this.clearQueueType = null;
        this.handlerWindowsObj = null;
        this.sceneWindows = null;
        this.showClearQueueDialog = false;
        this.waitToShowQueue = [];
      },
      hideClearQueueDialog() {
        this.showClearQueueDialog = false
      },
      getSendRecordList() {
        let arr = [1, 2]
        const params = {
          page: 1,
          pageSize: 1000000,
          statusList: arr
        }
        getSendFileRecord(params).then((res) => {
          this.recordsList = res.data.records.slice()
        })
      },
      handleQueue() {
        let _this = this;
        if (_this.waitToShowQueue.length > 0) {
          let index = 0;
          let queue = JSON.parse(JSON.stringify(_this.waitToShowQueue));
          queue.forEach(item => {
            let content = item.item;
            let sending = _this.recordsList.filter(per => per.id == item.id);
            if (sending.length == 0) {
              //发送完成，展示素材
              if (item.type == "handleAdd") {
                let index = item.index;
                if (item.handleState) {
                  _this.handleAdd(content, index)
                }
              } else {
                if (item.secondType == "openVedioWindow") {
                  let window = item.window;
                  _this.openVedioWindow(window)
                } else {
                  let info = item.info;
                  _this.select = {
                    ...info
                  };
                  //创建窗口
                  _this.createNewWindow(info);
                  _this.windows.unshift(info);
                }
              }
              _this.waitToShowQueue.splice(index, 1);
              _this.showTerDialog = false;
            }
            index++;
          })
        }
      },
      cancelTerDialog() {
        this.showTerDialog = false
      },
      mediaBack() {
        let length = this.mediaHistory.length;
        if (length > 1) {
          this.parentId = this.mediaHistory[length - 2];
          this.mediaHistory.splice(length - 1, 1);
        } else {
          this.parentId = 0;
          this.mediaHistory = [];
        }
        this.selectFileList = [];
        this.getFileListByTerminalId(null);
      },
      mediaImageError(row) {
        let mediaType = row.media_type;
        if (mediaType == 1) {
          row.image = this.defaultVideoImage;
        } else if (mediaType == 2) {
          row.image = this.defaultImgImage;
        } else if (mediaType == 3) {
          row.image = this.defaultDocImage;
        } else if (mediaType == 4) {
          row.image = this.defaultAppImage;
        } else if (mediaType == 5) {
          row.image = this.defaultWebImage;
        } else if (mediaType == 6) {
          row.image = this.defaultDesktopImage;
        } else if (mediaType == 7) {
          row.image = this.defaultOtherImage;
        } else if (mediaType == 8) {
          row.image = this.defaultProgramImage;
        } else if (mediaType == 9) {
          row.image = this.defaultStreamImage;
        }
      },
      manyouLayoutClose() {
        this.manyouLayoutShow = false;
      },
      manyouCancel() {
        this.manyouLayoutShow = false;
        this.manyouLayoutEdit = {
          ...this.manyouLayout
        };
      },
      manyouConfirm() {
        this.manyouLayoutShow = false;
        this.manyouLayout.row = null;
        this.manyouLayout = {
          ...this.manyouLayoutEdit
        };
        this.manyouLayoutWidth = this.middleWindowWidth / this.manyouLayout.col;
        this.manyouLayoutHeight = this.middleWindowHeight / this.manyouLayout.row;
      },
      fileLeftScrollInit() {
        // 获取要绑定事件的元素
        let nav = null;
        nav = this.$refs.terminalDetailBodyLeft;
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousewheel", function(event) {
          // 获取滚动方向
          const detail = event.wheelDelta || event.detail;
          // 定义滚动方向，其实也可以在赋值的时候写
          const moveForwardStep = 1;
          const moveBackStep = -1;
          // 定义滚动距离
          let step = 0;
          // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
          if (detail < 0) {
            step = moveForwardStep * 20;
          } else {
            step = moveBackStep * 20;
          }
          // 对需要滚动的元素进行滚动操作
          nav.scrollLeft += step;
        });
      },
      operationLeftScrollInit() {
        // 获取要绑定事件的元素
        let nav = null;
        nav = this.$refs.operationLeft;
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousewheel", function(event) {
          // 获取滚动方向
          const detail = event.wheelDelta || event.detail;
          // 定义滚动方向，其实也可以在赋值的时候写
          const moveForwardStep = 1;
          const moveBackStep = -1;
          // 定义滚动距离
          let step = 0;
          // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
          if (detail < 0) {
            step = moveForwardStep * 20;
          } else {
            step = moveBackStep * 20;
          }
          // 对需要滚动的元素进行滚动操作
          nav.scrollLeft += step;
        });
      },
      operationRightScrollInit() {
        // 获取要绑定事件的元素
        let nav = null;
        nav = this.$refs.operationRight;
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousewheel", function(event) {
          // 获取滚动方向
          const detail = event.wheelDelta || event.detail;
          // 定义滚动方向，其实也可以在赋值的时候写
          const moveForwardStep = 1;
          const moveBackStep = -1;
          // 定义滚动距离
          let step = 0;
          // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
          if (detail < 0) {
            step = moveForwardStep * 20;
          } else {
            step = moveBackStep * 20;
          }
          // 对需要滚动的元素进行滚动操作
          nav.scrollLeft += step;
        });
      },
      changeFileType(type) {
        this.mediaTypeSelectValue = 0;
        this.fileType = type;
        this.parentId = 0;
        this.mediaHistory = [];
        this.getFileListByTerminalId(null);
      },
      onLeftStart(e, row) {
        this.moveCache = JSON.parse(JSON.stringify(row))
        document.body.style.setProperty('--fodder-bg-color', 'rgba(241, 151, 44, 0.10)')
      },
      onLeftMove(e, list) {

      },
      onLeftEnd(e, list) {
        let toElement = e.to._prevClass ? e.to._prevClass : e.originalEvent.target._prevClass;
        //非文件夹才可拖拽
        // if(e.item._underlying_vm_.file_type != 1 && (toElement == "window-draggable" || toElement == "content-container" || toElement == "window-block-col")) {
        if (e.item._underlying_vm_.file_type != 1) {

          e.preventDefault()
          // 拖拽素材计算坐标
          if (e.originalEvent.type == "touchend") {
            this.mouseX = e.offsetX == null ? (e.originalEvent.pageX == null ? e.originalEvent.changedTouches[0].pageX :
                e.originalEvent.pageX) - this.$refs.screenWidth.getBoundingClientRect().left + document.documentElement
              .scrollLeft : e.offsetX;
            this.mouseY = e.offsetY == null ? (e.originalEvent.pageY == null ? e.originalEvent.changedTouches[0].pageY :
                e.originalEvent.pageY) - this.$refs.screenWidth.getBoundingClientRect().top + document.documentElement
              .scrollTop : e.offsetX;
          } else {
            this.mouseX = e.originalEvent.layerX
            this.mouseY = e.originalEvent.layerY
          }

          document.body.style.setProperty('--fodder-bg-color', 'transparent')
          const {
            originalEvent,
            newIndex
          } = e
          if (e.to.dataset.actindex) {
            let fileCache = {
              type: "handleAdd",
              index: e.to.dataset.actindex,
              item: this.moveCache[e.oldIndex]
            }
            this.fileCache = fileCache;
            this.handleAdd(this.moveCache[e.oldIndex], e.to.dataset.actindex)
          } else {
            let fileCache = {
              type: "manyouMethods",
              item: e.item._underlying_vm_
            }
            this.fileCache = fileCache;
            this.manyouMethods(e)
          }
        }
      },
      onDoubleClick(item) {
        if (item.file_type == 1) {
          this.parentId = item.id;
          this.getFileListByTerminalId(null);
          this.mediaHistory.push(item.id);
        }
      },
      showScrollBarFun() {
        this.hideScrollBar = false;
      },
      hideScrollBarFun() {
        this.hideScrollBar = true;
        this.scrollBarValue = 0;
      },
      physicalMoveScrollBarFun(e) {
        const delta = event.deltaY;
        this.scrollBarValue = delta;
        this.moveScrollBarFun()
      },
      moveScrollBarFun() {
        if (this.scrollBarValue > 0) {
          sendCmd('scroll', 'up', this.scrollBarValue, () => {})
        } else if (this.scrollBarValue < 0) {
          sendCmd('scroll', 'down', Math.abs(this.scrollBarValue), () => {})
        }
      },
      minWindow() {
        //清除可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility = 'hidden';
        })
        this.isMinWindow = true;
        sendCmd('min', 'window', null, () => {})
      },
      maxWindow() {
        this.isMinWindow = false;
        sendCmd('max', 'window', null, () => {
          //恢复可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.style.visibility = '';
          })
        })
      },
      clearAll() {
        if (!this.lock) {
          sendCmd('window', 'closeAll', {}, () => {
            this.select = {}
            this.windows = [];
            //清除可拖拽框
            const targetNodes = document.querySelectorAll('.myDrag');
            targetNodes.forEach((targetNode) => {
              targetNode.parentNode.removeChild(targetNode);
            })
            sendCmd('window', 'restoreSoftware', {}, () => {})
          })
        } else {
          this.$message.error('请先解锁')
        }
      },
      expandScenePanel() {
        this.hideScenePanelStatus = !this.hideScenePanelStatus;
        setTimeout(() => {
          this.showScenePanelStatus = !this.showScenePanelStatus;
        }, 500)
        setTimeout(() => {
          this.scrollHeight();
        }, 1000)
      },
      hideScenePanel() {
        this.showScenePanelStatus = !this.showScenePanelStatus;
        setTimeout(() => {
          this.hideScenePanelStatus = !this.hideScenePanelStatus;
        }, 500)
        setTimeout(() => {
          this.scrollHeight();
        }, 1000)
      },
      mediaTypeSelect(event) {
        this.mediaTypeSelectValue = event.target.value;
        if (event.target.value == 0) {
          //全部
          this.selectFileList = [];
          this.selectFileList = this.fileList
        } else {
          this.selectFileList = [];
          this.selectFileList = this.fileList.filter(per => per.media_type == event.target.value)
        }
      },
      changeScreen(item) {
        this.selectWindowScreen = item.id
        this.currentScreen =  item;
        this.clientDetail.resolution_rate = item.size;
        this.showCurrentScreen = true;
        this.scrollHeight();
        this.getClientWindowList();
      },
      showApplication() {
        this.isShowApplication = !this.isShowApplication
        if (this.isShowApplication) {
          sendCmd('max', 'window', null, () => {})
        } else {
          sendCmd('min', 'window', null, () => {})
        }
      },
      exitControll() {
        // 退出远程控制
        this.exitFullScreen();
      },
      remoteControll(e) {
        //远程控制 全屏中间窗口
        this.isFullscreen = true;
        // 禁止滚动
        document.body.style.overflow = 'hidden';
        //清除可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility = 'hidden';
        })
        let element = document.documentElement;
        this.launchFullscreen(element);
        this.initControlPannel();
      },
      launchFullscreen(element) {
        //全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.mozRequestFullscreen) {
          element.mozRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
        setTimeout(() => {
          this.windowWidth = document.documentElement.clientWidth;
          this.windowHeight = document.documentElement.clientHeight;
        }, 1000)
      },
      exitFullScreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          /* Firefox */
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          /* Chrome, Safari and Opera */
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          /* IE/Edge */
          document.msExitFullscreen();
        }
      },
      remoteControllMouseDown() {
        //远程鼠标状态
        this.remoteControllState = true;
      },
      initControlPannel() {
        //初始化鼠标控制面板位置
        // let height = window.innerHeight;
        // let width = window.innerWidth;
        // //原来是 width/2-75
        // this.mouseLeft = width / 2 - 75;
        // this.mouseTop = height / 2;
        sendCmd('min', 'window', null, () => {})
      },
      remoteControllMouseMove(e) {
        //远程鼠标移动
        if ((this.remoteControllState && this.isShowMousePannel) || !this.isShowMousePannel) {
          let clientX = e.clientX == null ? e.touches[0].clientX : e.clientX;
          let clientY = e.clientY == null ? e.touches[0].clientY : e.clientY;

          const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
          const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
          if (this.isMouseLeftDrag) {
            // this.mouseLeft = e.clientX - 45;
            // this.mouseTop = e.clientY - 35;
            this.mouseLeft = this.isShowMousePannel ? clientX - 20 : clientX;
            this.mouseTop = this.isShowMousePannel ? clientY - 60 : clientY;
          } else {
            // this.mouseLeft = e.clientX - 75;
            // this.mouseTop = e.clientY - 80;
            this.mouseLeft = this.isShowMousePannel ? clientX - 75 : clientX;
            this.mouseTop = this.isShowMousePannel ? clientY - 60 : clientY;
          }
          if (this.mouseLeft < 0) {
            this.mouseLeft = 0
          }
          if (this.mouseTop < 0) {
            this.mouseTop = 0
          }

          if (this.isShowMousePannel) {
            if (this.mouseLeft + 150 > window.innerWidth) {
              this.mouseScrollLeft = 120;
              window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
              });
              this.mouseLeft = this.mouseLeft + 120
            } else {
              this.mouseScrollLeft = 0;
              window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
              });
              // this.mouseLeft = this.mouseLeft - 100
            }
            if (this.mouseTop + 120 > window.innerHeight) {
              // this.mouseTop = window.innerHeight - 120
              this.mouseScrollTop = 120;
              window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
              });
              this.mouseTop = this.mouseTop + 120
            } else {
              this.mouseScrollTop = 0;
              window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
              });
            }
          }
          let x = rateX / window.innerWidth * this.mouseLeft;
          let y = rateY / window.innerHeight * this.mouseTop;
          let obj = {
            "x": Math.ceil(x),
            "y": Math.ceil(y)
          }

          if (((this.remoteControllState && this.isShowMousePannel) || !this.isShowMousePannel) && !this
            .isMouseLeftDrag && this.isFullscreen) {
            sendCmd('mouse', 'move', obj, () => {})
          }
        }
      },
      remoteControllMouseUp() {
        //远程鼠标状态
        this.remoteControllState = false;
      },
      physicalRightClick() {
        //远程鼠标右键双击
        sendCmd('mouse', 'rightDouble', null, () => {})
      },
      physicalLeftClickDown(e) {
        //物理左键按下
        if (!this.isShowMousePannel) {
          //记录按下初始位置
          this.mouseLeftDown(e);
        }
      },
      physicalLeftClickUp(e) {
        if (!this.isShowMousePannel) {
          this.mouseLeftUp(e)
        }
      },
      mouseLeftDown(e) {
        //左键按下
        //记录按下时间 用于判断是否为双击或拖拽
        this.mouseLeftDownTime = new Date().getTime();
        this.isMouseLeftDown = true;

        //记录按下初始位置
        this.mouseLeftDownX = e.clientX == null ? e.touches[0].clientX : e.clientX;
        this.mouseLeftDownY = e.clientY == null ? e.touches[0].clientY : e.clientY;
      },
      mouseLeftMove(e) {
        //左键拖拽事件
        if (this.isMouseLeftDown) {
          let nowTime = new Date().getTime();
          //点击超过300毫秒且移动距离超过5像素认为是拖拽事件
          if (nowTime - this.lastClickTime > 300) {
            let clientX = e.clientX == null ? e.touches[0].clientX : e.clientX;
            let clientY = e.clientY == null ? e.touches[0].clientY : e.clientY;

            // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
            const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
            const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
            let moveX = clientX - this.mouseLeftDownX;
            let moveY = clientY - this.mouseLeftDownY;
              .innerWidth + " " + rateX);
            if (Math.abs(moveX) > 5 ||
              Math.abs(moveY) > 5) {
              console.
              moveX = window.innerWidth / rateX * moveX;
              moveY = window.innerHeight / rateY * moveY;
              this.leftDownWithMoveX = Math.ceil(moveX);
              this.leftDownWithMoveY = Math.ceil(moveY);

              this.isMouseLeftDrag = true;
              this.remoteControllState = true;
            }
          }
        }
      },
      mouseLeftUp(e) {
        const _this = this;
        let nowTime = new Date().getTime();
        if (nowTime - this.lastClickTime < 300) {
          console.log('双击')
          sendCmd('mouse', 'leftDouble', null, () => {})
          //双击
          this.verClickNum++;
          this.lastClickTime = 0;
          this.clickTimer && clearTimeout(this.clickTimer);
          this.isMouseLeftDrag = false;
          this.isMouseLeftDown = false;
          this.remoteControllState = false;
        } else {
          this.lastClickTime = nowTime;
          this.clickTimer = setTimeout(function() {
            if (this.verClickNum > 1) {
              this.verClickNum = 1;
              return;
            } else {
              if (!_this.isMouseLeftDrag) {
                //单击
                console.log('单击')
                sendCmd('mouse', 'leftSingle', null, () => {})
                _this.isMouseLeftDrag = false;
                _this.isMouseLeftDown = false;
                _this.remoteControllState = false;
              } else {
                //拖拽
                let dragObj = {
                  "x": _this.leftDownWithMoveX,
                  "y": _this.leftDownWithMoveY
                }
                sendCmd('mouse', 'leftDownWithMove', dragObj, () => {
                  sendCmd('mouse', 'leftUp', null, () => {
                    _this.remoteControllMouseMove(e);
                    _this.isMouseLeftDrag = false;
                    _this.isMouseLeftDown = false;
                    _this.remoteControllState = false;
                  })
                })
              }
            }
          }, 300);
        }
      },
      mouseRightClick() {
        let nowTime = new Date().getTime();
        if (nowTime - this.lastClickTime < 300) {
          console.log('双击')
          //远程鼠标右键双击
          sendCmd('mouse', 'rightDouble', null, () => {})
          //双击
          this.verClickNum++;
          this.lastClickTime = 0;
          this.clickTimer && clearTimeout(this.clickTimer);
        } else {
          console.log('单击')
          //单击
          this.lastClickTime = nowTime;
          this.clickTimer = setTimeout(function() {
            if (this.verClickNum > 1) {
              this.verClickNum = 1;
              return;
            } else {
              //远程鼠标右键单击
              sendCmd('mouse', 'rightSingle', null, () => {})
            }
          }, 300);
        }
      },
      touchstart(e) {
        // 拖拽素材计算坐标
        this.mouseX = e.offsetX == null ? e.layerX : e.offsetX;
        this.mouseY = e.offsetY == null ? e.layerY : e.offsetY;
        if (this.mouseX == null) {
          let touches = e.touches;
          if (touches.length > 0) {
            let touch = touches[0];
            this.mouseX = touch.clientX;
          }
        }
        if (this.mouseY == null) {
          let touches = e.touches;
          if (touches.length > 0) {
            let touch = touches[0];
            this.mouseY = touch.clientY;
          }
        }

        if (e.target.parentElement.style.left) {
          this.mouseChildX = parseFloat(e.target.parentElement.style.left)
        } else {
          this.mouseChildX = 0
        }
        if (e.target.parentElement.style.top) {
          this.mouseChildY = parseFloat(e.target.parentElement.style.top)
        } else {
          this.mouseChildY = 0
        }
      },
      scrollHeight: function() {
        if (this.$refs.contentMain) {
          let headerHeight = this.$refs.headerBody.clientHeight;
          let leftHeight = this.$refs.terminalDetailBodyLeft.clientHeight;
          let rightHeight = this.$refs.terminalDetailBodyRight.clientHeight;
          let operationHeight = this.$refs.contentOperation.clientHeight;
          let contentTitleHeight = this.$refs.contentTitle.clientHeight;
          // let mainHeight = window.innerHeight * 0.4
          let mainHeight = window.innerHeight - headerHeight - rightHeight - operationHeight - contentTitleHeight -
            window.innerHeight * 0.25;
          let mainWidth = this.$refs.contentMain.clientWidth;
          //动态计算中间回显尺寸
          const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
          const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
          let height = mainHeight * 0.7;
          let orginalTimes = Math.ceil(rateY / height);
          height = rateY / orginalTimes;
          let screenWidth = height / rateY * rateX;
          if (screenWidth + 20 > mainWidth) {
            let mainWidhtNew = mainWidth * 0.95;
            let times = Math.ceil(rateX / mainWidhtNew)
            mainWidhtNew = rateX / times;
            this.screenWidth = mainWidhtNew;
            this.screenHeight = mainWidhtNew / rateX * rateY;
          } else {
            this.screenHeight = height;
            this.screenWidth = screenWidth;
          }

          this.middleWindowWidth = this.screenWidth;
          this.middleWindowHeight = this.screenHeight;

          let leftTitleHeight = this.$refs.leftBodyTitle.clientHeight;
          let leftMenuHeight = this.$refs.leftBodyMenu.clientHeight;
          this.leftFileHeight = leftHeight - leftTitleHeight - leftMenuHeight - 20;

          let rightTitleHeight = this.$refs.rightBodyTitle.clientHeight;

          let terminalDetailHeight = this.$refs.terminalDetail.clientHeight;
          let terminalDetailHeaderHeight = this.$refs.terminalHeader.clientHeight;
          let fontSize = (document.documentElement.clientHeight - 42) / 1200 * 100;
          this.terminalDetailBodyRightHeight = (terminalDetailHeight - terminalDetailHeaderHeight) / fontSize - 0.4;

          this.manyouLayoutWidth = this.middleWindowWidth / this.manyouLayout.col - 0.5;
          this.manyouLayoutHeight = this.middleWindowHeight / this.manyouLayout.row - 0.5;
        }
      },
      getExtraScreen() {
        sendCmd('get', 'extraWindow', {}, (msg) => {
          this.windowScreenList = [];
          let windowObj = JSON.parse(msg);
          let content = windowObj.content;
          if (content.length > 0) {
            let index = 1;
            content.forEach(item => {
              let obj = {
                "id": index,
                "name": item.name,
                "size": item.width + "*" + item.height,
                "x": item.x,
                "y": item.y,
                "width": item.width,
                "height": item.height,
                "stramAddress": item.stramAddress
              }
              this.windowScreenList.push(obj);
              if(index == 1) {
                this.currentScreen = obj
                this.clientDetail.resolution_rate = obj.size;
                this.changeScreen(obj)
              }
              index++;
            })
          }
          if (this.windowScreenList.length > 0) {
            this.selectWindowScreen = this.windowScreenList[0].id;
          }
        })
      },
      getClientWindowList() {

        sendCmd('get', 'windowList', {}, (msg) => {
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          this.windows = [];
          if (msg != undefined && msg != null) {
            let windowObj = JSON.parse(msg)

            console.log('指令返回 ---', JSON.stringify(windowObj.content))
            let index = 1;
            let total = windowObj.content.length;
            windowObj.content.forEach((item, key) => {
              let {
                width,
                height,
                x,
                y,
                id
              } = item
              const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
              const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
              let calcW = Math.ceil(this.middleWindowWidth / rateX * width) // 计算百分比绘制窗口
              let calcH = Math.ceil(this.middleWindowHeight / rateY * height)
              let top = Math.ceil(this.middleWindowHeight / rateY * y);
              let left = Math.ceil(this.middleWindowWidth / rateX * x);
              if (width == 0 && height == 0) {
                calcW = 1
                calcH = 1
              }
              //left top需要减去当前分屏的x y
              //小于0或大于当前屏幕分辨率的即不属于当前屏幕
              let currentScreen = this.currentScreen;
              let currentScreenX = currentScreen.x;
              let currentScreenY = currentScreen.y;
              let currentScreenWidth = currentScreen.width;
              let currentScreenHeight = currentScreen.height;
              left = left - currentScreenX;
              top = top - currentScreenY;
              if(left >= 0 && top >= 0 && left <= currentScreenWidth && top <= currentScreenHeight) {
                let tmpWindowCoor = {
                  top: `${top}px`,
                  left: `${left}px`,
                  width: `${calcW}px`,
                  height: `${calcH}px`
                }

                let value = mediaTypeMap[item.subMode];
                let mediaType = mediaTypeMap[item.subMode] ? mediaTypeMap[item.subMode] : '';
                let playStatus = 0;
                if (mediaType == 1 || mediaType == 8) {
                  playStatus = 1;
                }

                let thisRow = {
                  'x': Math.ceil(left),
                  'y': Math.ceil(top),
                  'coordinate': JSON.stringify(tmpWindowCoor),
                  'isInit': true,
                  'width': Math.ceil(calcW),
                  'height': Math.ceil(calcH),
                  'id': item.id,
                  'winId': item.id,
                  'content': item.content,
                  'subMode': item.subMode,
                  'mediaType': mediaType,
                  'windowId': item.id,
                  'playStatus': playStatus,
                  "autoTime": 5000
                }
                this.createNewWindow(thisRow);
                this.currentWindowId = thisRow.id;
                let window = {
                  ...thisRow
                };
                window.isInit = false;
                this.windows.unshift(window);
                this.select = {
                  ...thisRow
                }
                if (index == total) {
                  //选中
                  const targetNode = document.querySelector('.manyou-container-' + thisRow.id);
                  targetNode.classList.add('active');
                }
              }
              index++;
            })
          }
        })
      },
      openVedioWindow(item) {
        let _this = this;
        if (item.isInit == null || !item.isInit) {
          const row = {
            ...item
          }
          const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
          const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])

          let openXPercent = rateX / this.middleWindowWidth
          let openYPercent = rateY / this.middleWindowHeight
          let openWPercent = row.width / this.middleWindowWidth
          let openHPercent = row.height / this.middleWindowWidth
          let sendX = Math.ceil(openXPercent * row.x);
          let sendY = Math.ceil(openYPercent * row.y);

          let name = row.content
          if (row.subMode == 'show') {
            name = row.content.showList[0].name
          }
          const obj = {
            subMode: row.subMode,
            content: row.content,
            id: row.id, //窗口id 不是素材id
            width: Math.ceil(rateX * openWPercent),
            height: Math.ceil(rateX * openHPercent),
            name: name,
            x: sendX + this.currentScreen.x,
            y: sendY + this.currentScreen.y,
            windowId: row.id,
            winId: row.id
          }
          sendCmd('open', 'multScreen', obj, (result) => {
            const data = result.data;
            const cmdResult = JSON.parse(data);
            const cmd = cmdResult.cmd
            const content = cmdResult.content
            if (cmd == "Fail") {
              //文件不存在，向终端发送文件
              let clientIds = [this.clientDetail.id];
              let mediaIds = [item.mediaId];
              const params = {
                clientIds,
                mediaIds
              };
              //清除可拖拽框
              const targetNodes = document.querySelectorAll('.manyou-container-' + row.id);
              targetNodes.forEach((targetNode) => {
                targetNode.parentNode.removeChild(targetNode);
              })
              if (this.fileCache.type == "handleAdd") {
                //分屏模式下，文件发送后展示最新的素材，原来正在发送的文件继续发送但不展示
                this.fileCache.handleState = true;
                this.waitToShowQueue.forEach(item => {
                  if (item.index == this.fileCache.index) {
                    item.handleState = false;
                  }
                })
              }
              this.waitToShowQueue.push(this.fileCache)
              this.fileCache = null;
              quicklySend(params).then(() => {
                _this.$message.success('发送成功')
                _this.$refs.terListDialogRef.getFileRateList()
                this.showTerDialog = true;
              })
            } else {
              this.fileCache = null;
              _this.select = null;
              _this.select = item;
            }
          })
        }
      },
      createNewWindow(row) {
        this.select = row;
        let text = 'edit'
        let item = {
          sort: 0
        }
        const _this = this
        let showText = text === 'edit' ? item.sort : _this.createWindowNum + 1
        const windowLayoutContainer = document.querySelector('.window')
        const windowDom = document.createElement('div')
        windowDom.setAttribute('class', 'new-window-container')
        windowDom.setAttribute('id', 'window-container-' + new Date().getTime())
        windowLayoutContainer.appendChild(windowDom)
        let clientDetail = this.clientDetail
        // 定义组件
        const MyComponent = Vue.extend({
          components: {
            VueDragResize,
            HlsVideo
          },
          data() {
            return {
              item: {
                ...row
              },
              isActive: true,
            }
          },
          mounted() {
            this.$nextTick(() => {
              let {
                left,
                top,
                width,
                height
              } = this.$refs.drag
              if (row.x != null) {
                left = row.x;
              }
              if (row.y != null) {
                top = row.y;
              }
              if (row.width != null) {
                width = row.width;
              }
              if (row.height != null) {
                height = row.height;
              }
              _this.openVedioWindow({
                ...this.item,
                width,
                height,
                top,
                left
              })
            })
          },
          methods: {
            dragTouchstart(e) {},
            dragTouchend(item) {
              if (this.isDoubleClicked) {
                this.doubleClickMethod(item);
              } else {
                this.isDoubleClicked = true;
                setTimeout(() => {
                  this.isDoubleClicked = false
                }, 300)
              }
            },
            clickDragMethods(index) {
              if (!_this.lock) {
                _this.currentDragDom = this.$refs.drag.$el
                _this.select = this.item
                _this.windows.forEach(per => {
                  if (per.windowId == this.item.windowId) {
                    _this.select.playStatus = per.playStatus
                    _this.select.autoTime = per.autoTime
                    _this.autoPlayImageNum = per.autoTime / 1000
                  }
                })
                // eventbus 传递子组件点击的值
                EventBus.$emit('emitActive', this.item)
              } else {
                _this.$message.error('请先解锁')
              }
            },
            startDragging(newRect) {
              if (!_this.lock) {
                const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
                const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
                let openXPercent = (rateX / _this.middleWindowWidth)
                let openYPercent = (rateY / _this.middleWindowHeight)
                const obj = {
                  x: newRect.left * openXPercent + _this.currentScreen.x,
                  y: newRect.top * openYPercent + _this.currentScreen.y,
                  id: this.item.id
                }
                let diffX = rateX - (newRect.width + newRect.left) * openXPercent
                if(diffX < 15) {
                  obj.x = rateX - newRect.width * openXPercent + diffX
                  newRect.left = newRect.left + diffX/openXPercent
                }
                let diffY = rateY - (newRect.height + newRect.top) * openYPercent
                if(diffY < 15) {
                  obj.y = rateY - newRect.height * openYPercent + diffY
                  newRect.top = newRect.top + diffY/openYPercent
                }
                for (let i = 0; i < _this.windows.length; i++) {
                  let window = _this.windows[i];
                  if (window.id = this.item.id) {
                    window.x = newRect.left;
                    window.y = newRect.top;
                  }
                }
                sendCmd('move', 'multScreen', obj, () => {

                })
              }
            },
            initItem(newRect) {
              const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
              const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
              let openXPercent = (rateX / _this.middleWindowWidth)
              let openYPercent = (rateY / _this.middleWindowHeight)
              const obj = {
                x: newRect.left * openXPercent,
                y: newRect.top * openYPercent,
                id: this.item.id
              }
              for (let i = 0; i < _this.windows.length; i++) {
                let window = _this.windows[i];
                if (window.id = this.item.id) {
                  window.x = newRect.left;
                  window.y = newRect.top;
                }
              }
            },
            // 双击贴边
            doubleClickMethod(item) {
              if (!this.lock) {
                _this.currentDragDom = this.$refs.drag.$el
                this.$nextTick(() => {
                  let isChange = false;
                  //手动修改ref的值，因为源码中宽度是通过left和right计算出来的，所以left和right都需要修改
                  let parentWidth = this.$refs.drag.parentWidth
                  let width = this.$refs.drag.width

                  //行数
                  const row = _this.manyouLayout.row
                  //列数
                  const col = _this.manyouLayout.col
                  const containerWidth = _this.middleWindowWidth;
                  const containerHeight = _this.middleWindowHeight;
                  const drag = this.$refs.drag;
                  const dragLeft = drag.left;
                  const dragTop = drag.top;
                  const dragRight = drag.right;
                  const dragBottom = drag.bottom;
                  const perWidth = containerWidth / col;
                  const perHeight = containerHeight / row;
                  //计算左侧覆盖的格子位于第几列
                  let newLeftCol = [];
                  let newLeftColSame = false;
                  for (let i = 0; i <= col; i++) {
                    if (perWidth * i > dragLeft) {
                      // newLeftCol = i - 1;
                      newLeftCol.push(i - 1);
                      break;
                    }
                    if (perWidth * i == dragLeft) {
                      newLeftColSame = true;
                      break;
                    }
                  }
                  if (!newLeftColSame) {
                    let max = newLeftCol[newLeftCol.length - 1];
                    let left = perWidth * max;
                    this.$refs.drag.left = left;
                    isChange = true;
                  }
                  //计算右侧覆盖的格子位于第几列
                  let newRightCol = 0;
                  let newRightColSame = false;
                  for (let i = 0; i <= col; i++) {
                    if (perWidth * i > (containerWidth - dragRight)) {
                      newRightCol = i;
                      break;
                    }
                    if (perWidth * i == (containerWidth - dragRight)) {
                      newRightColSame = true;
                      break;
                    }
                  }
                  if (!newRightColSame) {
                    this.$refs.drag.right = containerWidth - perWidth * newRightCol;
                    isChange = true;
                  }
                  //计算上面覆盖的格子位于第几行
                  let newTopRow = [];
                  let newTopRowSame = false;
                  for (let i = 0; i <= row; i++) {
                    if (perHeight * i > dragTop) {
                      newTopRow.push(i - 1);
                      break;
                    }
                    if (perHeight * i == dragTop) {
                      newTopRowSame = true;
                      break;
                    }
                  }
                  if (!newTopRowSame) {
                    let max = newTopRow[newTopRow.length - 1];
                    let top = perHeight * max;
                    this.$refs.drag.top = top;
                    isChange = true;
                  }
                  //计算下面覆盖的格子位于第几行
                  let newBottomRow = 0;
                  let newBottomRowSame = false;
                  for (let i = 0; i <= row; i++) {
                    if (perHeight * i > (containerHeight - dragBottom)) {
                      newBottomRow = i;
                      break;
                    }
                    if (perHeight * i == (containerHeight - dragBottom)) {
                      newBottomRowSame = true;
                      break;
                    }
                  }
                  if (!newBottomRowSame) {
                    this.$refs.drag.bottom = containerHeight - perHeight * newBottomRow;
                    isChange = true;
                  }
                  if (isChange) {
                    // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
                    const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
                    const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])

                    let openXPercent = (rateX / _this.middleWindowWidth)
                    let openYPercent = (rateY / _this.middleWindowHeight)
                    let obj = {
                      width: this.$refs.drag.width * openXPercent,
                      height: this.$refs.drag.height * openYPercent,
                      x: this.$refs.drag.left * openXPercent + _this.currentScreen.x,
                      y: this.$refs.drag.top * openYPercent + _this.currentScreen.y,
                      windowId: item.windowId,
                      id: item.id
                    }
                    for (let i = 0; i < _this.windows.length; i++) {
                      let window = _this.windows[i];
                      if (window.id = item.id) {
                        window.x = this.$refs.drag.left;
                        window.y = this.$refs.drag.top;
                        window.width = this.$refs.drag.width;
                        window.height = this.$refs.drag.height;
                      }
                    }
                    sendCmd('resize', 'multScreen', {
                      ...obj
                    }, () => {
                      sendCmd('move', 'multScreen', {
                        ...obj
                      }, () => {})
                    })
                  }
                })
              }
            },
            resizestop(newRect) {
              if (!this.lock) {
                const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
                const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])

                let openXPercent = (rateX / _this.middleWindowWidth)
                let openYPercent = (rateY / _this.middleWindowHeight)
                const obj = {
                  width: newRect.width * openXPercent,
                  height: newRect.height * openYPercent,
                  x: newRect.left * openXPercent + _this.currentScreen.x,
                  y: newRect.top * openYPercent + _this.currentScreen.y,
                  windowId: this.item.windowId,
                  id: this.item.id
                }
                for (let i = 0; i < _this.windows.length; i++) {
                  let window = _this.windows[i];
                  if (window.id = this.item.id) {
                    window.x = newRect.left;
                    window.y = newRect.top;
                    window.width = newRect.width;
                    window.height = newRect.height;
                  }
                }
                sendCmd('resize', 'multScreen', {
                  ...obj
                }, () => {

                })
                sendCmd('move', 'multScreen', {
                  ...obj
                }, () => {

                })
              }
            },
            //回显方法
            echoMethod() {

              let width = 0;
              let height = 0;
              if (row.width == null) {
                width = 150;
              } else {
                width = row.width
              }
              if (row.height == null) {
                height = 150;
              } else {
                height = row.height;
              }
              const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
              const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
              const topValue = row.y;
              const leftValue = row.x;

              this.$refs.drag.$attrs.detail = {
                ...row
              }
              this.$refs.drag.top = topValue
              this.$refs.drag.bottom = this.$refs.drag.parentHeight - topValue - height
              this.$refs.drag.left = leftValue
              this.$refs.drag.right = this.$refs.drag.parentWidth - leftValue - width
            },
          },
          template: `<vue-drag-resize
                        ref="drag"
                         @dragstop="startDragging"
                         @resizestop="resizestop"
                         @dblclick.native="doubleClickMethod(item)"
                         :w="50"
                          :h="50"
                          :x="0"
                          :y="0"
                          @clicked="clickDragMethods"
                          @touchstart.native="dragTouchstart"
                          @touchend.native="dragTouchend(item)"
                          data-index="${parseInt(this.createWindowNum, 10) + 1}"
                          class="manyou-container-${row.windowId} myDrag"
                          :parentLimitation="true"
                        >
                        </vue-drag-resize>`
        });

        // 创建组件实例
        const componentInstance = new MyComponent();
        // 挂载到DOM元素上
        componentInstance.$mount(windowDom);
        componentInstance.echoMethod()
        this.windows[this.select] = {
          ...row
        }

        this.$set(this, 'select', {
          ...row
        })
        this.$nextTick(() => {
          console.log('drag', this.$refs.drag)
        })

      },
      dropNewHandler(ev) {
        console.log('ev ---', ev)
      },
      getWebsiteHistory() {
        let historyList = window.localStorage.getItem(`websiteHistory-${this.clientId}`)
        if (historyList) {
          this.historyWebsite = JSON.parse(historyList)
        }
      },
      playPrograme() {
        this.playProgrameList = this.currentWindow.programs.slice()
        this.startPlayPrograme()
      },
      playShow(control) {
        let cacheDetail = this.select
        sendCmd('show', control, cacheDetail)
        let playStatus = null;
        if (control == "play") {
          this.select.playStatus = 1;
          playStatus = 1;
        } else {
          this.select.playStatus = 0;
          playStatus = 0;
        }
        this.windows.forEach(item => {
          if (item.windowId == this.select.windowId) {
            item.playStatus = playStatus
          }
        })
      },
      startPlayPrograme() {
        if (this.playProgrameList.length === 0) {
          return
        }
        this.playProgrameList.forEach((item) => {
          this.programeTimer = setTimeout(() => {

          }, item.time)
        })
      },
      reCalWidthHeight() {
        // 获取父级宽，高动态计算格子宽高
        // const parentWindowBody = document.querySelector('#video-client-bg')
        // const parentWindowRect = parentWindowBody.getBoundingClientRect()
        // this.middleWindowWidth = parentWindowRect.width
        // this.middleWindowHeight = parentWindowRect.height
      },
      initSelectedWindow(windowId) {
        //清除选中
        const targetNodes = document.querySelectorAll('.myDrag');
        if(targetNodes) {
          targetNodes.forEach((targetNode) => {
            targetNode.classList.remove('active');
          })
        }
        //选中
        const targetNode = document.querySelector('.manyou-container-' + windowId);
        if(targetNode) {
          targetNode.classList.remove('inactive');
          targetNode.classList.add('active');
        }
      },
      controlWebApplication(control, obj, row = {}) {
        let cacheDetail = this.select
        let routerUrl = this.routerUrl
        if (obj != null) {
          routerUrl = obj.url;
          this.$refs.historyPopover.doClose();
        }
        cacheDetail.routerUrl = routerUrl
        if (control === 'navigate') {
          sendCmd('webApplication', control, cacheDetail, () => {
            let websiteTmp = {
              url: routerUrl,
              name: routerUrl
            }
            let isExist = false;
            for (let i = 0; i < this.historyWebsite.length; i++) {
              let item = this.historyWebsite[i];
              if (item.url == websiteTmp.url) {
                isExist = true;
                break;
              }
            }
            if (!isExist) {
              this.historyWebsite.push(websiteTmp)
              window.localStorage.setItem(`websiteHistory-${this.clientId}`, JSON.stringify(this.historyWebsite))
            }
            this.getWebsiteHistory()
          })
        } else {
          sendCmd('webApplication', control, cacheDetail)
        }
      },
      controlApplication(control) {
        let cacheDetail = this.currentWindow
        sendCmd('application', control, cacheDetail)
      },
      controlImage(control) {
        // 图片模式

        if (this.select.mediaType == 2) {
          let cacheDetail = this.select;
          cacheDetail.autoTime = this.autoPlayImageNum * 1000
          sendCmd('image', control, cacheDetail)
        } else if (this.select.mediaType == 3) {
          let cacheDetail = this.select;
          cacheDetail.autoPlayImageNum = this.autoPlayImageNum * 1000
          sendCmd('office', control, cacheDetail)
        }

        let playStatus = null;
        if (control == "play") {
          this.select.playStatus = 1;
          playStatus = 1;
        } else {
          this.select.playStatus = 0;
          playStatus = 0;
        }
        this.windows.forEach(item => {
          if (item.windowId == this.select.windowId) {
            item.playStatus = playStatus
            item.autoTime = this.autoPlayImageNum * 1000
          }
        })
      },
      playVideoVoice(control) {
        this.videoVoice = !this.videoVoice
        let cacheDetail = this.currentWindow
        sendCmd('video', control, cacheDetail)
      },
      playVideo(control) {
        let cacheDetail = this.select
        sendCmd('video', control, cacheDetail)
        let playStatus = null;
        if (control == "play") {
          cacheDetail.playStatus = 1;
          playStatus = 1;
        } else if (control == "pause") {
          cacheDetail.playStatus = 0;
          playStatus = 0;
        } else if (control == "stop") {
          cacheDetail.playStatus = 2;
          playStatus = 2;
        } else {
          cacheDetail.playStatus = 1;
          playStatus = 1;
        }
        this.select = {
          ...cacheDetail
        }
        this.windows.forEach(item => {
          if (item.windowId == this.select.windowId) {
            item.playStatus = playStatus
          }
        })

        if(this.getPercentTimer) {
          this.continueStatus = false;
          clearTimeout(this.getPercentTimer)
          this.getPercentTimer = null
        }
        if(playStatus ==  1) {
          this.$nextTick(() => {
            setTimeout(() => {
              this.continueStatus = true;
              // 开始发送获取视频进度的指令
              this.startWatchVideoPercent(this.select)
              // 获取音频进度
              this.startGetVideoAudioPercent(this.select)
            }, 2000)
          })
        }

      },
      playStream(control){
        let cacheDetail = this.select
        sendCmd('stream', control, cacheDetail)
      },
      updateTime() {
        this.updateTimeId = setInterval(() => {
          this.currentDate = format(new Date(), 'YYYY/MM/DD hh:mm:ss')
        }, 1000)
      },
      back() {
        // this.$router.back()
        this.$router.push(`/terminalNewHome`)
      },
      async getFileListByTerminalId(val) {
        const res = await getFileListByTerminalId(this.clientId, this.fileType, this.parentId, val, this
          .mediaTypeSelectValue)
        let _this = this;
        res.forEach(item => {
          item.mediaTypeName = suffixFileMapStr[item.media_type]
          if (item.file_type == 1) {
            item.mediaTypeName = "文件夹";
          }
          item.defaultImage = _this.defaultImage[(item.media_type - 1)]
        })
        this.fileList = res;
        this.selectFileList = res;
        this.scrollHeight();
        // 调终端查窗口信息
        // this.getClientWindowList();
      },
      async getSceneList(id) {
        const res = await getSceneList({
          page: 1,
          pageSize: 20,
          clientId: id,
        })
        // res.data.records = res.data.records.filter((result) => {
        //   return result.type != 1
        // })
        this.sceneList = res.data.records;

        // if(res.data.records.length === 0) {
        //   // this.$message.error('该终端未绑定场景')
        //   return
        // }
        // await this.getBySceneId(this.sceneList[0].id)
      },
      handleSelectScene(item) {

      },
      handlepoPover(item) {
        item.visible = true
      },
      handleClose(item) {
        item.visible = false
      },
      async handleSaveScene(item) {
        await saveScene({
          clients: [{
            ...this.currentScreenItem,
            windows: this.windows.map(row => {
              return {
                id: row.id,
                layoutWindowId: row.layoutWindowId,
                mediaId: row.mediaId
              }
            })
          }],
          id: item.id,
        })
        this.$message.success('保存成功')
      },
      async handleDeleteScene(item) {
        await this.$confirm('确认删除场景?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      },
      async handleUpdateScene(item) {
        this.$prompt('请输入名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: item.title,
        }).then(async ({
          value
        }) => {
          item.title = value
          await saveScene({
            id: item.id,
            title: value
          })
        })
      },
      onStart(e) {
        document.body.style.setProperty('--bg-color', 'rgba(241, 151, 44, 0.10)')
        document.body.style.setProperty('--border-value', '1px solid #F1972C')
      },
      onEnd(e) {
        document.body.style.setProperty('--bg-color', 'transparent')
        document.body.style.setProperty('--border-value', '1px solid #ffffff')
        const {
          originalEvent,
          newIndex
        } = e
        if (this.sceneList[newIndex].id) {
          this.getBySceneId(this.sceneList[newIndex].id)
        }
      },
      onEndWindow(e) {
        e.preventDefault()
      },
      handlerWindowsDetail(window) {
        if (!this.lock) {
          for (let index = 0; index < window.length; index++) {
            if (window[index].media) {
              window[index].media_name = window[index].media.media_name
              this.$set(this.windows, index, window[index])
            }
          }
          this.layoutWindows = window
        } else {
          this.$message.error('请先解锁')
        }
      },
      // 拖拽场景 开窗 执行素材
      startSceneHandlerWindow(window, layout, type, callback = () => {}) {
        // 开窗
        let index = 1;
        window.forEach((item, key) => {
          let media = {
            ...item.media
          };
          if (item.coordinate != undefined && item.coordinate != null) {
            let coordinateStr = item.coordinate;
            let coordinate = JSON.parse(coordinateStr);
            let xPersent = coordinate.left.split("%")[0] / 100;
            let yPersent = coordinate.top.split("%")[0] / 100;
            let widthPersent = coordinate.width.split("%")[0] / 100;
            let heightPersent = coordinate.height.split("%")[0] / 100;
              heightPersent)
            let width = Math.ceil(widthPersent * this.middleWindowWidth); // 计算百分比绘制窗口
            let height = Math.ceil(heightPersent * this.middleWindowHeight);
            let y = Math.ceil(yPersent * this.middleWindowHeight);
            let x = Math.ceil(xPersent * this.middleWindowWidth);

            let subMode = media.media_type;
            let mediaType = media.media_type;
            let content = media.media_name;
            let playStatus = 0;
            if (!isNaN(Number(subMode))) {
              subMode = mediaTypeStrMap[media.media_type];
            } else {
              mediaType = mediaTypeMap[media.media_type] ? mediaTypeMap[media.media_type] : '';
            }
            if (mediaType == 4 || mediaType == 5) {
              content = media.location;
            } else if (mediaType == 9) {
              content = media.media_link;
            } else if (mediaType == 1) {
              playStatus = 1;
            }
            const info = {
              "x": x,
              "y": y,
              "width": width,
              "height": height,
              "isInit": false,
              "id": index,
              "content": content,
              "subMode": subMode,
              "mediaType": mediaType,
              "windowId": index,
              "playStatus": playStatus,
              "autoTime": 5000
            }
            this.select = {
              ...info
            };
            //创建窗口
            this.createNewWindow(info);
            this.windows.unshift(info);
            index++;


            // let i = key
            // sendCmd('window', 'open', {row:item, i, content:item , subMode:''}, () => {
            //   if(item.media_type == 5) {
            //     item.location = item.media.location
            //   }
            //   this.handleAdd(item, key)
            // })

          }
        })
        // this.currentLayout = {
        //   ...layout,
        //   layoutType: type
        // }
        // const list = []
        // for (let index = 0; index < window.length; index++) {
        //   if(window[index].media) {
        //     window[index].media_name = window[index].media.media_name
        //     window[index].media_type = window[index].media.media_type
        //     this.handleSelect(index)
        //   }
        //   list.push({})
        // }
        // this.windows = list
        // this.windows.splice(0,0)
        // for (let index = 0; index < window.length; index++) {
        //   if(window[index].media) {
        //     this.$set(this.windows, index, window[index])
        //   }
        // }
        // this.layoutWindows = window
        // 获取父级宽，高动态计算格子宽高
        // this.reCalWidthHeight()
      },
      handlerWindows(window, layout, type, callback = () => {}) {

        let _this = this;
        const originalWindows = {
          ..._this.windows
        }
        if (!this.lock) {
          this.handlerWindow = window;
          this.handlerLayout = layout;
          this.handlerType = type;
          this.currentWindowId = 0;
          let openOldMedia = true;
          this.mode = ''
          let windowDomList = document.querySelectorAll('.window-item-no')
          // 关闭所有分屏
          sendCmd('window', 'closeAll', {}, () => {
            this.select = {}
            this.windows = [];
            //清除可拖拽框
            const targetNodes = document.querySelectorAll('.myDrag');
            targetNodes.forEach((targetNode) => {
              targetNode.parentNode.removeChild(targetNode);
            })
            this.startHandlerWindow(window, layout, type, originalWindows, openOldMedia)
          })
        } else {
          this.$message.error('请先解锁')
        }
      },
      handlerSceneWindows(window, layout, type, callback = () => {}) {
        if (!this.lock) {
          this.mode = 'manyou'
          // 关闭所有分屏
          sendCmd('window', 'closeAll', {}, () => {
            this.select = {};
            this.windows = [];
            //清除可拖拽框
            const targetNodes = document.querySelectorAll('.myDrag');
            targetNodes.forEach((targetNode) => {
              targetNode.parentNode.removeChild(targetNode);
            })
            this.startSceneHandlerWindow(window, layout, type)
          })
        } else {
          this.$message.error('请先解锁');
        }
      },
      async startHandlerWindow(window, layout, type, originalWindows, openOldMedia, callback = () => {}) {
        let _this = this;
        //是否打开已有素材 仅非自由模式的布局切换才需要保留原窗口
        if (openOldMedia) {
          //获取全部素材
          const allMedias = await getFileListByTerminalId(_this.clientId, 1, null, 2, null);
          // 开窗
          window.forEach((item, key) => {
            let i = key;
            sendCmd('window', 'open', {
              row: item,
              i,
              content: item,
              subMode: ''
            }, () => {
              if (originalWindows[i]) {
                let perOriginalWindow = originalWindows[i];
                let mediaType = perOriginalWindow.mediaType;
                let media;
                for (let mediaIndex = 0; mediaIndex < allMedias.length; mediaIndex++) {
                  let perMedia = allMedias[mediaIndex];
                  let content = perMedia.media_name;
                  // if(perMedia.media_suffix != null)  {
                  //   content = perMedia.media_name + "." + perMedia.media_suffix;
                  // }
                  let perMediaType = perMedia.media_type;
                  if (perMediaType == 4 || perMediaType == 5) {
                    content = perMedia.location;
                  } else if (perMediaType == 9) {
                    content = perMedia.media_link;
                  }
                  if (content == perOriginalWindow.content && mediaType == perMediaType) {
                    media = perMedia;
                    media.media_name = content;
                    break;
                  }
                }
                _this.handleAdd(media, i);
              }
            })
          })
        }
        this.currentLayout = {
          ...layout,
          layoutType: type
        }
        const list = []
        for (let index = 0; index < window.length; index++) {
          if (window[index].media) {
            window[index].media_name = window[index].media.media_name
            window[index].media_type = window[index].media.media_type
            this.handleSelect(index)
          }
          list.push({})
        }
        this.windows = list
        this.windows.splice(0, 0)
        for (let index = 0; index < window.length; index++) {
          if (window[index].media) {
            this.$set(this.windows, index, window[index])
          }
        }
        this.layoutWindows = window
        // 获取父级宽，高动态计算格子宽高
        // this.reCalWidthHeight()
      },
      isLock() {
        return this.lock
      },
      async getClientList() {
        const res = await getClientList({
          page: 1,
          pageSize: 20
        })
        this.clientList = res.data.records;
        this.clientSelected = this.clientId;
      },
      async getBySceneId(sceneId) {
        if (!this.lock) {
          const res = await getBySceneId({
            clientId: this.clientId,
            sceneId,
          })
          this.currentScreenItem = res;
          let sceneWindows = [...res.data.layout.windows]
          this.showClearQueueDialogFun(3, sceneWindows);
        } else {
          this.$message.error('请先解锁');
        }
      },
      manyouMethods(msg) {
        if (!this.lock) {
          const {
            _underlying_vm_
          } = msg.item
          //因为初始化素材设置了150*150，鼠标位置素材中心，所以鼠标坐标-75
          let originalTimes = Math.ceil(this.middleWindowWidth / 150)
          let square = this.middleWindowWidth / originalTimes;
          let width = square;
          let height = square;
          let x = this.mouseX - square / 2;
          let y = this.mouseY - square / 2;
          const div = this.$refs.windowDom;
          const rect = div.getBoundingClientRect();
          if (this.mouseX > 0 && this.mouseY > 0) {
            if (x < 0 && x > -(square / 2)) {
              x = 0;
            }
            if (y < 0 && y > -(square / 2)) {
              y = 0;
            }
            if (x + square > this.middleWindowWidth) {
              x = this.middleWindowWidth - square;
            }
            if (y + square > this.middleWindowHeight) {
              y = this.middleWindowHeight - square;
            }
            let subMode = _underlying_vm_.media_type;
            let mediaType = _underlying_vm_.media_type;
            let content = _underlying_vm_.media_name;
            if (!isNaN(Number(subMode))) {
              subMode = mediaTypeStrMap[_underlying_vm_.media_type];
            } else {
              mediaType = mediaTypeMap[_underlying_vm_.media_type] ? mediaTypeMap[_underlying_vm_.media_type] : '';
            }
            if (mediaType == 4 || mediaType == 5) {
              content = _underlying_vm_.location;
            } else if (mediaType == 9) {
              content = _underlying_vm_.media_link;
            } else if (mediaType == 8) {
              let programs = _underlying_vm_.programs;
              let shows = [];
              for (let i = 0; i < programs.length; i++) {
                let program = programs[i];
                let show = {
                  "mode": mediaTypeStrMap[program.media_type],
                  "time": program.play_time,
                  "content": program.media_name
                };
                shows.push(show);
              }
              let showList = [{
                "id": _underlying_vm_.id,
                "name": _underlying_vm_.id + "",
                "show": shows
              }]
              content = {
                "showList": showList
              }
            }
            //替换窗口
            let infoId = null;
            let isReplace = false;
            let replaceIndex = 0;
            for (let i = 0; i < this.windows.length; i++) {
              let window = this.windows[i];
              let minX = window.x;
              let maxX = window.x + window.width;
              let minY = window.y;
              let maxY = window.y + window.height;
              if ((this.mouseX + this.mouseChildX) >= minX &&
                (this.mouseX + this.mouseChildX) <= maxX &&
                (this.mouseY + this.mouseChildY) >= minY &&
                (this.mouseY + this.mouseChildY) <= maxY) {

                //替换
                window.content = content;
                window.subMode = subMode;
                window.mediaType = mediaType;
                window.mediaId = _underlying_vm_.id;
                this.windows[i] = {
                  ...window
                };
                isReplace = true;
                if (this.fileCache != null) {
                  this.fileCache.secondType = "openVedioWindow"
                  this.fileCache.window = window;
                }
                this.openVedioWindow(window);
                break;
              }
            }
            //新增窗口
            if (!isReplace) {
              infoId = this.currentWindowId + 1;
              this.currentWindowId = this.currentWindowId + 1;

              const isInit = false;

              let playStatus = 0;
              if (mediaType == 1) {
                playStatus = 1;
              }

              const info = {
                "x": x,
                "y": y,
                "width": width,
                "height": height,
                "isInit": isInit,
                "id": infoId,
                "content": content,
                "subMode": subMode,
                "mediaType": mediaType,
                "windowId": infoId,
                "playStatus": playStatus,
                "autoTime": 5000,
                "mediaId": _underlying_vm_.id
              }
              if (this.fileCache != null) {
                this.fileCache.secondType = "createNewWindow"
                this.fileCache.info = info;
              }
              this.select = {
                ...info
              };

              //创建窗口
              this.createNewWindow(info);
              this.windows.unshift(info);
            }
          }
        } else {
          this.$message.error('请先解锁');
        }
      },
      startGetVideoAudioPercent(item) {
        sendCmd('audio', 'getpercent', item, (msg) => {
          let result = JSON.parse(msg)

          let percent = parseInt(result.voice, 10)
          this.audioPercent = percent;
          //mute=false 取消静音
          this.videoVoice = result.mute == "false" ? true : false;
          this.$refs.percentAudioBarRef.setPercentValue(percent)
        })
      },
      startWatchVideoPercent(item) {
        // if(this.getPercentTimer) return
        let _this = this;
        clearTimeout(this.getPercentTimer);
        this.getPercentTimer = setTimeout(() => {
          sendCmd('video', 'getpercent', item, (msg) => {
            let result = JSON.parse(msg)
            let percent = parseFloat(result.progress) / 10
            this.$refs.percentBarRef.setPercentValue(percent)
            let playTmpList = result.time.split(':')

            this.videoCurrentPlayTime = playTmpList[0]
            this.videoTotalPlayTime = playTmpList[1]
            this.getPercentTimer = null
            if (percent <= 98) {
              this.startWatchVideoPercent(item)
            }
          })
        }, 1000)
      },
      handleAdd(item, i) {
        let _this = this;

        let infoId;
        if (this.mode === 'manyou') {
          infoId = item.id
        } else {
          infoId = parseInt(i, 10) + 1
        }
        let subMode = item.media_type;
        let mediaType = item.media_type;
        if (!isNaN(Number(subMode))) {
          subMode = mediaTypeStrMap[item.media_type];
        } else {
          mediaType = mediaTypeMap[item.media_type] ? mediaTypeMap[item.media_type] : '';
        }
        const info = {
          "id": infoId,
          "content": item.media_name,
          "subMode": subMode,
          "mediaType": mediaType,
          "windowId": infoId,
          "playStatus": 1
        }

        if (item.media_type == 2) {
          sendCmd('image', 'open', info)
        }
        if (item.media_type == 3) {
          let thisSubMode = 'office'
          // ppt后缀有哪些
          if (item.media_suffix == 'ppt' || item.media_suffix == 'pptx') {
            thisSubMode = 'ppt'
          }
          info.subMode = thisSubMode
          sendCmd('office', 'open', info)
        }
        if (item.media_type == 4) {
          info.content = item.location;
          sendCmd('application', 'open', info)
        }
        if (item.media_type == 5) {
          let thisSubMode = 'web'
          info.subMode = thisSubMode;
          info.content = item.location;
          sendCmd('webApplication', 'open', info)
        }
        if (item.media_type == 7) {
          let thisSubMode = 'other'
          info.subMode = thisSubMode
          sendCmd('otherApplication', 'open', info)
        }
        if (item.media_type == 8) {
          let programs = item.programs;
          let shows = [];
          for (let i = 0; i < programs.length; i++) {
            let program = programs[i];
            let show = {
              "mode": mediaTypeStrMap[program.media_type],
              "time": program.play_time,
              "content": program.media_name
            };
            shows.push(show);
          }
          let showList = [{
            "id": item.id,
            "name": item.id + "",
            "show": shows
          }]
          info.content = {
            "showList": showList
          };
          sendCmd('show', 'save', info)
        }
        if (item.media_type == 9) {
          info.content = item.media_link;
          sendCmd('stream', 'open', info)
        }
        this.$set(this.windows, i, info)


        if (item.media_type == 1) {
          clearTimeout(this.getPercentTimer)
          this.getPercentTimer = null
          sendCmd('video', 'play', info, () => {
            _this.select = info;
          })
        } else {
          this.select = info;
        }
      },
      handleSelect(i) {
        this.activeWindow = i
        this.isShowBarrage = false
        this.select = this.windows[i]
      },
      handleRoam() {
        if (!this.lock) {
          if (this.mode === 'manyou') {
            if (this.currentWindow) {
              this.currentWindow.mediaType = ''
            }
          }
          // sendCmd('window', 'closeAll', {}, () => {
          this.select = {}
          this.windows = [];
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          this.getClientWindowList();
          // })
          this.mode = 'manyou'
          this.$message.success('自由模式')
          this.manyouLayoutEdit = {
            ...this.manyouLayout
          }
          this.manyouLayoutShow = true;
        } else {
          this.$message.error('请先解锁')
        }
      },
      initStream(ops) {
        if (mpegts.isSupported()) {
          // 根据id名称创建对应的video
          const ele = document.getElementById(ops.elementId);
          this.flvPlayer = mpegts.createPlayer({
            type: 'flv', // 指定媒体类型
            isLive: true, // 开启直播（是否为实时流）
            hasAudio: false, // 关闭声音（如果拉过来的视频流中没有音频一定要把这里设置为fasle，否则无法播放）
            cors: true, // 开启跨域访问
            url: ops.URL // 指定流链接（这里是传递过过来的视频流的地址）
          }, {
            enableWorker: false, //启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
            enableStashBuffer: false, //关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
            stashInitialSize: 128, //减少首帧等待时长（针对实时视频流）
            lazyLoad: false, //关闭懒加载模式（针对实时视频流）
            lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
            deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
            liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟
            liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
            liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
          });
          // mpegts
          this.flvPlayer.attachMediaElement(ele);
          this.videoMap.set(ops.elementId, this.flvPlayer);
          // play(this.flvPlayer);
          // flvEvent();
        }
      },
      /**
       * 重新加载视频
       */
      load() {
        for (let index = 1; index < 5; index++) {
          if (!this.videoMap.has('video-contianer-' + index)) {
            this.initStream({
              URL: 'http://localhost:1010/video/' + tag.value, //这里改成自己要拉流的视频地址，我这里放的是自己后端推送的1078视频的flv实时视频流
              elementId: 'video-contianer-' + index
            });
            break;
          }
        }
      },
      handleClear() {
        if (!this.lock) {
          let _this = this;
          let windowId = this.select.id;
          sendCmd('window', 'close', windowId, () => {
            //清除可拖拽框
            const targetNodes = document.querySelectorAll('.myDrag');
            let thisClassName = "manyou-container-" + windowId;
            targetNodes.forEach((targetNode) => {
              if (targetNode.className.indexOf(thisClassName) > -1) {
                targetNode.parentNode.removeChild(targetNode);
              }
            })
            this.select = {}
            let itemIndex = 0;
            for (let i = 0; i < _this.windows.length; i++) {
              let item = _this.windows[i]
              if (item.windowId == windowId) {
                itemIndex = i;
                break;
              }
            }
            _this.windows[itemIndex] = {};
            if (_this.mode != 'manyou') {
              let item = _this.layoutWindows[windowId - 1];
              let i = windowId - 1;
              sendCmd('window', 'open', {
                row: item,
                i,
                content: {},
                subMode: ''
              })
            }
          })
        } else {
          this.$message.error('请先解锁')
        }
      },
      handleLock() {
        this.lock = true;
        this.select = {};
        //清除可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility = 'hidden';
        })
        this.$message.success('已锁定');
      },
      handleUnlock() {
        this.lock = false;
        //恢复可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility = '';
        })
        this.$message.success('已解锁');
      },
      handleBarrage() {
        // const videoDom = document.getElementById('video-client-bg')

        this.isShowBarrage = !this.isShowBarrage
        if (this.isShowBarrage) {
          this.getCaptions()
          // videoDom.style.zIndex = -1
        } else {
          // videoDom.style.zIndex = 100
        }
      },
      async getCaptions() {
        const res = await getCaptions({
          page: 1,
          pageSize: 20,
          clientId: this.clientId,
        })
        this.barrageData = res.data.records
        for (let i = 0; i < this.barrageData.length; i++) {
          this.barrageData[i].scene = i + 1;
        }
      },
      changeAudioPercent(row) {
        this.audioPercent = row
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          let cacheDetail = this.currentWindow
          cacheDetail.percent = row
          sendCmd('audio', 'percent', cacheDetail)
        }, 500)
      },
      changePercent(row) {
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          let cacheDetail = this.currentWindow
          cacheDetail.percent = row
          sendCmd('video', 'percent', cacheDetail)
        }, 500)
      },
      async handleCaptionsOpen(item, index) {
        await openOrClose({
          open: item.open,
          id: item.id,
        })
        let object = JSON.parse(item.location);
        // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
        const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
        const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
        let width = Math.ceil(object.width * rateX); // 计算百分比绘制窗口
        let height = Math.ceil(object.width * rateY);
        let y = Math.ceil(object.y * rateY);
        let x = Math.ceil(object.x * rateX);
        object.x = x;
        object.y = y;
        object.width = width;
        object.height = height;
        object.scene = item.scene
        // 发送弹幕指令
        if (item.open) {
          sendCmd('captions', 'start', object);
        } else {
          sendCmd('captions', 'close', object)
        }
        this.getCaptions()
      },
      async handleCellDbclick(row, column, cell, event) {
        if (column.property === 'content') {
          this.dialogCaptionsVisible = true
          this.contentForm = row
        }
      },
      changeDmContent(row) {
        this.contentForm.content = row.html
      },
      setDmPos(type) {
        this.contentForm.type = type
      },
      saveCaptions() {
        saveCaptions({
          clientId: this.contentForm.clientId,
          content: this.contentForm.content,
          id: this.contentForm.id,
          open: this.contentForm.open,
          title: this.contentForm.title,
          type: this.contentForm.type,
        })
        this.$message.success('保存成功')
        this.dialogCaptionsVisible = false
        setTimeout(() => {
          this.getCaptions()
        }, 500)
      },
      async getLayoutList() {
        const res = await getLayoutList({
          page: 1,
          pageSize: 2000,
        })
        this.layoutList = res.data.records
        this.layoutList.forEach((item) => {
          if (item.title === '全屏') {
            let image = require('@/assets/terminalDetail/screen_01.png')
            item.image = image
          }
          if (item.title === '二分屏') {
            let image = require('@/assets/terminalDetail/screen_02.png')
            item.image = image
          }
          if (item.title === '三分屏') {
            let image = require('@/assets/terminalDetail/screen_03.png')
            item.image = image
          }
          if (item.title === '四分屏') {
            let image = require('@/assets/terminalDetail/screen_04.png')
            item.image = image
          }
          if (item.title === '九分屏') {
            let image = require('@/assets/terminalDetail/screen_09.png')
            item.image = image
          }
        })
      },
    },
    async created() {
      this.updateTime()
      // 获取屏幕拓展屏
      await this.getCurrentToken();
      await this.getExtraScreen();
      await this.getClientList();
    },
    beforeDestroy() {
      if (this.updateTimeId) {
        clearInterval(this.updateTimeId)
      }
      if (this.player) {
        this.player.dispose();
      }
    },

  }
</script>

<style scoped lang="scss">
  *:not(input):not(textarea) {
    -webkit-user-select: none;
    /* disable selection/Copy of UIWeb  */
    -webkit-touch-callout: none;
    /* disable the IOS popup when long-press on a link */
  }

  * {
    margin: 0;
    padding: 0;
  }

  .terminal-detail {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    background-image: linear-gradient(to bottom, #021132, #072C62);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0px;
    overflow: hidden;

    .svg-icon {
      font-size: .56rem;
      color: #fff;
      margin-right: .2rem;
    }

    &-header {
      width: 100%;
      background-image: url("~@/assets/terminalDetail/title_bar_vertical.png");
      background-size: 100% 100%;
      line-height: 0.5rem;
      position: relative;

      &_time {
        color: #fff;
        position: absolute;
        top: 0;
        right: .2rem;
        font-size: 0.17rem;
        line-height: .5rem;
      }

      &_name {
        width: 42%;
        margin-left: 0.2rem;
        color: #fff;
        font-size: .2rem;
        text-align: center;
        height: .5rem;
        line-height: .5rem;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &-body {
      margin-top: .1rem;

      &-title {
        height: .5rem;
        width: 100%;
        color: #409EFF;
        line-height: .5rem;
        padding: 0 .2rem;
        font-size: .2rem;
        font-weight: 600;
        background-color: #042767;

        .title {
          display: inline-block;
          margin-right: .3rem;
        }

        .el-button {
          padding: .06rem !important;
          font-size: .16rem;
          margin-left: .15rem;
          border-radius: .06rem;
        }
      }

      &-upOrDown {
        position: absolute;
        right: .4rem;
        color: #ffffff;

        span {
          vertical-align: middle;
        }

        img {
          width: .25rem;
          vertical-align: middle;
        }
      }

      &-left {
        background-color: #031A46;
        width: 100%;
        margin-top: 3%;

        &-file::-webkit-scrollbar {
          display: none;
        }

        &-file {
          height: 84%;
          overflow: auto;
          padding: .2rem;
        }

        &-back {
          cursor: pointer;
          color: #4f8bff;
          width: 100%;
          font-size: 0.22rem;
        }
      }

      &-menu {
        width: 100%;
        height: .6rem;
        padding: .2rem;
        vertical-align: middle;
        color: rgba(255, 255, 255, 0.7);
        font-size: .16rem;

        .mediaTypeSelector {
          width: 50%;
          background-color: #031F52;
          color: #fff;
          border: none;
          padding: .1rem;
          outline: none;
        }

        &-back {
          cursor: pointer;
          color: #4f8bff;
          font-size: 0.18rem;
          position: absolute;
          line-height: .4rem;
          right: .3rem;
        }
      }

      &-file::-webkit-scrollbar {
        display: none;
      }

      &-file {
        height: 84%;
        overflow: auto;
        padding: .2rem;
      }

      &-content {
        border-radius: .2rem;
        margin: 0 .2rem;
        display: flex;
        flex-direction: column;

        &_main-option-video {
          padding: .14rem .4rem;

          .progress {
            margin-bottom: .1rem;
            font-size: .25rem;

            .vue-slider-rail {
              height: .1rem;
              background-color: rgba(217, 217, 217, 0.40);
            }

            .vue-slider-ltr {
              padding: 0 !important;
              height: .1rem !important;
            }
          }

          .video {
            align-items: flex-start !important;

            .vue-slider-rail {
              background-color: rgba(217, 217, 217, 0.40);
            }
          }

          .audio-progress {
            width: 20%;
            position: relative;

            .vue-slider-rail {
              height: .16rem;
              background-color: rgba(217, 217, 217, 0.40) !important
            }
          }

          .audio-words {
            color: white;
            position: relative;
            padding: 0.5% 0;
            font-size: .29rem;
            color: rgba(255, 255, 255, 0.80);
            left: 7px;
          }
        }

        &-screen {
          background: linear-gradient(180deg, #0D3377 0%, rgba(13, 51, 119, 0) 100%), #021234;
          height: .6rem;
          text-align: center;
          margin-top: .2rem;
          display: flex;
          flex-direction: row;
          border-radius: .2rem .2rem 0 0;

          .screen-button-container {
            line-height: 0.8rem;
            color: #AAA7A8;
            font-size: .22rem;
            flex: 1;
            cursor: pointer;

            .screen-button-container-name {
              line-height: .5rem;
              height: .3rem;
            }

            .screen-button-container-size {
              line-height: .45rem;
              height: .45rem;
              font-size: .15rem;

              &-text {
                display: inline-block;
                line-height: .35rem;
                height: .35rem;
              }

              .border-active {
                border-bottom: #409EFF 2px solid;
              }
            }

          }

          .text-active {
            color: #fff;
          }

        }

        &_main {
          background: linear-gradient(180deg, rgba(13, 51, 119, 0) 0%, #0D3377 100%), #021234;
          width: 100%;
          border-radius: 0 0 .2rem .2rem;
          padding: .16rem .24rem .28rem;
          flex-direction: column;
          box-sizing: border-box;

          .window {
            border: 1px solid #fff;
            flex: 1;
            height: 100%;
            position: relative;

            &:hover {
              background-color: var(--bg-color);
            }

            &-item {
              box-sizing: border-box;
              vertical-align: middle;
              position: relative;
              border: 1px dashed #fff;
              position: absolute;
              width: 200px;
              height: 200px;

              &-no {
                width: 100%;
                height: 100%;
                background-color: transparent;
                color: #fff;
                display: flex;
                //align-items: center;
                //justify-content: center;
              }

              &-img {
                width: 100%;
                position: absolute;
                height: 100%;
              }

              &:hover {
                background-color: var(--fodder-bg-color);
                // border: var(--fodder-border-value);
              }
            }
          }

          &-option {
            border-radius: .3rem;
            height: 1.12rem;
            // margin-top: .1rem;
            width: 100%;
            padding: 0 0;
            box-sizing: border-box;

            .operationBtn {
              width: .4rem;
              height: .4rem;
              margin-right: .3rem;
              cursor: pointer;
              background-size: 100% 100%;
            }

            .svg-icon {
              width: 0.6em;
              height: 0.6em;
            }

            .video {
              display: flex;
              align-items: center !important;
              justify-content: center;
              // height: .6rem;
              padding: 0 2px;

              .videoPlay {
                background-image: url("~@/assets/terminalDetail/play.png");
              }

              .videoPlay:hover {
                background-image: url("~@/assets/terminalDetail/play_active.png");
              }

              .videoPause {
                background-image: url("~@/assets/terminalDetail/pause.png");
              }

              .videoPause:hover {
                background-image: url("~@/assets/terminalDetail/pause_active.png");
              }

              .videoStop {
                background-image: url("~@/assets/terminalDetail/stop.png");
              }

              .videoStop:hover {
                background-image: url("~@/assets/terminalDetail/stop_active.png");
              }

              .videoReplay {
                background-image: url("~@/assets/terminalDetail/replay.png");
              }

              .videoReplay:hover {
                background-image: url("~@/assets/terminalDetail/replay_active.png");
              }

              img {
                width: .4rem;
                margin: 0 .1rem;
                cursor: pointer;
              }

              .progress {
                flex: 1;
              }

              .svg-icon {
                width: 0.6em;
                height: 0.6em;
                margin-right: .3rem;
              }
            }

            .image {
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: center;

              img {
                width: .4rem;
                cursor: pointer;
              }

              .imagePlay {
                background-image: url("~@/assets/terminalDetail/play.png");
              }

              .imagePlay:hover {
                background-image: url("~@/assets/terminalDetail/play_active.png");
              }

              .imagePause {
                background-image: url("~@/assets/terminalDetail/pause.png");
              }

              .imagePause:hover {
                background-image: url("~@/assets/terminalDetail/pause_active.png");
              }

              .imageFirst {
                background-image: url("~@/assets/terminalDetail/first.png");
              }

              .imageFirst:hover {
                background-image: url("~@/assets/terminalDetail/first_active.png");
              }

              .imageLast {
                background-image: url("~@/assets/terminalDetail/last.png");
              }

              .imageLast:hover {
                background-image: url("~@/assets/terminalDetail/last_active.png");
              }

              .imagePrevious {
                background-image: url("~@/assets/terminalDetail/previous.png");
              }

              .imagePrevious:hover {
                background-image: url("~@/assets/terminalDetail/previous_active.png");
              }

              .imageNext {
                background-image: url("~@/assets/terminalDetail/next.png");
              }

              .imageNext:hover {
                background-image: url("~@/assets/terminalDetail/next_active.png");
              }

              .sum-warp {
                margin: 0 2%;
                display: flex;
                align-items: center;
                color: #fff;
                font-size: .35rem;
                line-height: .54rem;
                width: 1.8rem;

                .sum-warp-text {
                  width: 1rem;
                  color: #ffffff;
                  text-align: center;
                  border: none;
                  outline: none;
                  padding: .1rem;
                  border-radius: .1rem;
                  font-size: .28rem;
                  background-color: rgba(42, 89, 173, 0.50);
                }

                .sum {
                  width: 1rem;
                  height: .6rem;
                  box-sizing: border-box;
                  border: 1px solid #fff;
                  padding: 0 .1rem;
                  margin-right: .1rem;
                }

                .unit {
                  height: .6rem;
                  margin-left: .16rem;
                }
              }
            }

            .application {
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: center;

              .svg-icon {
                margin-right: .3rem;
              }

              img {
                width: .4rem;
                cursor: pointer;
              }

              .applicationReplay {
                background-image: url("~@/assets/terminalDetail/replay.png");
              }

              .applicationReplay:hover {
                background-image: url("~@/assets/terminalDetail/replay_active.png");
              }

              .applicationClose {
                background-image: url("~@/assets/terminalDetail/close.png");
              }

              .applicationClose:hover {
                background-image: url("~@/assets/terminalDetail/close_active.png");
              }

              .programPlay {
                background-image: url("~@/assets/terminalDetail/play.png");
              }

              .programPlay:hover {
                background-image: url("~@/assets/terminalDetail/play_active.png");
              }

              .programPrev {
                background-image: url("~@/assets/terminalDetail/previous.png");
              }

              .programPrev:hover {
                background-image: url("~@/assets/terminalDetail/previous_active.png");
              }

              .programNext {
                background-image: url("~@/assets/terminalDetail/next.png");
              }

              .programNext:hover {
                background-image: url("~@/assets/terminalDetail/next_active.png");
              }

              .programStop {
                background-image: url("~@/assets/terminalDetail/stop.png");
              }

              .programStop:hover {
                background-image: url("~@/assets/terminalDetail/stop_active.png");
              }
            }

            .web {
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: center;

              img {
                width: .4rem;
                cursor: pointer;
              }

              .webPrevious {
                background-image: url("~@/assets/terminalDetail/previous.png");
              }

              .webPrevious:hover {
                background-image: url("~@/assets/terminalDetail/previous_active.png");
              }

              .webNext {
                background-image: url("~@/assets/terminalDetail/next.png");
              }

              .webNext:hover {
                background-image: url("~@/assets/terminalDetail/next_active.png");
              }

              .webReplay {
                background-image: url("~@/assets/terminalDetail/replay.png");
              }

              .webReplay:hover {
                background-image: url("~@/assets/terminalDetail/replay_active.png");
              }

              .progress {
                margin-left: 10%;
                margin-right: .2rem;
                width: 50%;

                ::v-deep .el-input-group--append .el-input__inner {
                  height: .6rem;
                  background-color: rgba(42, 89, 173, 0.50);
                  border: none;
                  font-size: .24rem;
                }

                ::v-deep .el-input-group__append {
                  background-color: rgba(64, 158, 255, 1);
                  border: none;
                  color: #fff;
                }

                ::v-deep .el-progress-bar__outer {
                  border: 1px solid #fff;
                  border-radius: 0;

                  .el-progress-bar__inner {
                    border-radius: 0;
                  }
                }
              }
            }
          }

          .barrage {
            width: 100%;
            height: 100%;
            background-color: #fff;
          }
          .captions-content{
            max-height: 20px;
          }
        }

        &_operation {
          height: 1.4rem;
          box-sizing: border-box;
          // height: 100px;
          padding: .16rem 0 0 0;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .svg-icon {
            font-size: .5rem;
            color: #fff;
            margin-right: .3rem;
            vertical-align: baseline;

            &:last-child {
              margin-right: 0;
            }
          }

          .img {
            width: .8rem;
            // height: .8rem;
            margin-right: .2rem;
          }

          &_left::-webkit-scrollbar {
            display: none;
          }

          &_left {
            width: 8rem;
            background: #021234;
            box-shadow: inset 0px 4px .4rem 0px rgba(13, 51, 119, 0.7);
            height: 100%;
            padding: 0 .2rem;
            margin-bottom: .2rem;
            text-align: center;
            display: flex;
            align-items: center;
            overflow-x: auto;
            overflow-y: hidden;
            border-radius: .06rem;

            img {
              width: .6rem;
              height: .6rem;
            }

            .operation-btn-container {
              flex: 1;
              min-width: 1rem;
              cursor: pointer;

              .operation-btn-container-img {
                width: 1rem
              }

              .operation-btn-container-text {
                color: #fff;
                font-size: .23rem;
                width: 1rem;
              }
            }
          }

          &-right::-webkit-scrollbar {
            display: none;
          }

          &-right {
            width: 10.4rem;
            background: #021234;
            box-shadow: inset 0px 4px .4rem 0px rgba(13, 51, 119, 0.7);
            height: 100%;
            padding: 0 .2rem;
            margin-bottom: .2rem;
            text-align: center;
            display: flex;
            align-items: center;
            overflow-x: auto;
            overflow-y: hidden;
            border-radius: .06rem;

            img {
              width: .6rem;
              height: .6rem;
            }

            .right-operation-btn-container {
              text-align: center;
              min-width: 1.2rem;
              cursor: pointer;

              .operation-btn-container-img {
                width: 1.2rem
              }

              .operation-btn-container-text {
                color: #fff;
                font-size: .23rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }

      &-right {
        width: 95%;
        margin-left: 2.5%;
        margin-top: 3%;

        &-upOrDown {
          position: absolute;
          right: .4rem;
          color: #ffffff;

          span {
            vertical-align: middle;
          }

          img {
            width: .25rem;
            vertical-align: middle;
          }
        }

        &-hide {
          margin-top: .2rem;
          width: 1.3rem;

          &_title {
            height: .5rem;
            width: 100%;
            color: #409EFF;
            line-height: .5rem;
            padding: 0 .2rem;
            font-size: .28rem;
            font-weight: bold;
            background-color: #042767;
          }
        }

        &_title {
          height: .5rem;
          width: 100%;
          color: #409EFF;
          line-height: .5rem;
          padding: 0 .2rem;
          font-size: .23rem;
          font-weight: 600;
          background-color: #042767;

          &_text {
            display: inline-block;
          }

          &_button {
            position: absolute;
            right: .2rem;
            cursor: pointer;

            img {
              width: .26rem;
              height: .26rem;
              vertical-align: middle;
              margin-right: 2px;
            }

            a {
              font-size: .2rem;
              color: #fff;
            }
          }
        }

        &_body {
          height: 84%;
          overflow: auto;
          padding: 0.2rem;
        }

        &_body::-webkit-scrollbar {
          display: none;
        }

        .scene-item {
          &_view {
            background-color: #0A2255;
            border-radius: .2rem;
            position: relative;
            overflow: hidden;
            margin-top: .12rem;
            height: 2.1rem;

            &-img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }

            &-no {
              width: 100%;
              height: 100%;
              background-color: rgba(255, 255, 255, 0.8);
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          &_name {
            color: #fff;
            font-size: .22rem;
            line-height: .43rem;
            height: .43rem;
            bottom: 0;
            width: 100%;
            background-color: rgba(3, 18, 51, 0.7);
            position: absolute;
            padding: 0 .2rem;
          }
        }
      }
    }

    // .dragClass {
    //   border-radius: .16rem;
    // }
    .dm-position-row {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .dm-position-col {
        min-width: 1.6rem;
        cursor: pointer;
        padding: .2rem 0;
      }

      .dm-position-col-active {
        color: #409EFF;
      }
    }

    ::v-deep .el-dialog__body {
      padding: .2rem !important;
    }

    .row-control {
      text-align: center;

      .mayouLayoutInput {
        width: 2rem;
        text-align: center;
      }
    }
  }
</style>
<style lang="scss">
  .terminal-detail-view {
    background: rgba(204, 204, 204, 1);

    .terminal-detail-view-icon {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      &:last-child {
        margin-bottom: 0;
      }

      .img {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 1.2rem;
        color: #fff;
        margin-right: .2rem;
        margin-bottom: .2rem;
      }
    }
  }

  .window-item-active {
    border: 2px dashed #67C23A !important;
  }

  .scene-operate {
    .el-button {
      display: block;
      width: 100%;
    }

    .el-button+.el-button {
      margin-top: .2rem;
      margin-left: 0;
    }
  }

  .page01-video-bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .video-bg-img {
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
  }

  .video-bg {
    width: 100%;
    height: 100%;
    //background: #000;
    position: absolute;
    top: 0;
    left: 0;

    .player-wrapper {
      height: 100% !important;
    }

    .video-wrapper {
      position: inherit !important;
    }
  }

  .videoBgFullscreen {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .window-block-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    .window-block-row {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .window-block-col {
        border: .022rem dashed #fff;
        height: 1.6rem;
      }
    }
  }

  .window-item {
    z-index: 2000;
  }

  .window-draggable {
    width: 100%;
    position: relative;
    height: 100%;
  }

  .website-list-body {}

  .website-list-row {
    padding: .2rem;
    cursor: pointer;
  }

  .window-item-no {
    padding: .2rem;
    position: relative;
    z-index: 100;
    font-size: 0.25rem;
  }
</style>
<style lang="scss">
  .extraRight {
    width: 120px;
    height: 100%;
    background: #000;
    top: 0;
    position: absolute;
  }

  .extraBottom {
    width: 100%;
    height: 120px;
    background: #000;
    left: 0;
    position: absolute;
  }

  .windowMask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    width: 1200px;
    height: 1000px
  }

  .expand-enter-active,
  .expand-leave-active {
    transition: all 0.5s ease;
  }

  .expand-enter,
  .expand-leave-to {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    margin: 0;
  }

  .hg-theme-default {
    background-color: rgba(0, 0, 0, 0.8)
  }



  .cotroll-button-pannel-parent {
    width: 100%;
    top: 0;
    position: fixed;
    text-align: center;
    z-index: 101;

    .cotroll-button-pannel {
      backdrop-filter: blur(3px);
      width: 5rem;
      padding: 0 .3rem;
      margin: 0 auto;
      height: 0.8rem;
      background-color: rgba(2, 18, 51, 0.70);
      border-radius: 0 0 .12rem .12rem;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;

      .cotroll-button-pannel-btn {
        flex: 1;
        cursor: pointer;

        .cotroll-button-pannel-btn-exit {
          width: .6rem;
          text-align: center;
          margin: 0 auto;

          img {
            width: .3rem;
            height: .3rem;
          }
        }

        .cotroll-button-pannel-btn-text {
          width: .6rem;
          color: #fff;
          font-size: .15rem;
          margin: 0 auto;
        }

        .active {
          color: #409EFF;
        }
      }

    }
  }


  .cotroll-button {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    padding-top: 22px;
    bottom: 1rem;
    z-index: 99
  }

  .video-js {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .myDrag {
    z-index: 2 !important;
    outline: .03rem dashed lightgrey;
  }

  .vdr.myDrag.active::before {
    /* outline-color: green; */
    outline: .03rem dashed green;
  }

  .vdr.myDrag.active .vdr-stick {
    background-color: green;
    width: .1rem !important;
    height: .1rem !important;
  }

  .vdr-stick-bl {
    bottom: -.05rem !important;
    left: -.05rem !important;
  }

  .vdr-stick-ml {
    left: -.05rem !important;
  }

  .vdr-stick-tl {
    top: -.05rem !important;
    left: -.05rem !important;
  }

  .vdr-stick-tm {
    top: -.05rem !important;
  }

  .vdr-stick-bm {
    bottom: -.05rem !important;
  }

  .vdr-stick-br {
    bottom: -.05rem !important;
    right: -.05rem !important;
  }

  .vdr-stick-mr {
    right: -.05rem !important;
  }

  .vdr-stick-tr {
    top: -.05rem !important;
    right: -.05rem !important;
  }

  .dragClass {
    border-radius: .16rem;

    .item_view {
      transform: scale(0.5);
    }
  }

  .draggable {
    display: flex;
    justify-content: left;
    height: 1rem;
  }

  .item {
    margin-right: .12rem;
    min-width: 1.8rem;
    max-width: 2rem;

    .item_view {
      border-radius: .1rem !important;
      height: 1rem;
      background-color: #0A2255;
      position: relative;
      overflow: hidden;

      .item-mask {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
      }

      .item_type {
        color: #fff;
        font-size: .14rem;
        line-height: .32rem;
        height: .32rem;
        top: .08rem;
        right: .08rem;
        padding: 0 .1rem;
        background-color: rgba(3, 18, 51, 0.4);
        position: absolute;
        text-align: center;
        border-radius: .2rem;
      }

      .item-mask {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
      }

      .item_view-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .item_name {
        color: #fff;
        font-size: .18rem;
        line-height: .35rem;
        height: .35rem;
        bottom: 0;
        width: 100%;
        background-color: rgba(3, 18, 51, 0.7);
        position: absolute;
        padding: 0 .1rem;
      }
    }
  }
  .input-with-select{
    .el-input__inner{
      color: #fff;
    }
  }

  [v-cloak] {
    display: none !important;
  }
</style>
